vue-devui 1.0.0-beta.6 → 1.0.0-beta.7

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent as defineComponent$1, toRefs, computed, createVNode, Fragment, mergeProps, resolveComponent, onMounted, watch, ref, Transition, withDirectives, vShow, createTextVNode, inject, getCurrentInstance, onBeforeUnmount, provide, Comment, reactive, toRef, resolveDirective, onUnmounted, Teleport, renderSlot, isVNode, isRef as isRef$1, useSlots, createApp, h, render, readonly, nextTick as nextTick$1, onUpdated, onBeforeMount, unref as unref$1 } from "vue";
+import { defineComponent as defineComponent$1, toRefs, computed, createVNode, Fragment, mergeProps, resolveComponent, onMounted, watch, ref, Transition, withDirectives, vShow, createTextVNode, inject, getCurrentInstance, onBeforeUnmount, provide, Comment as Comment$1, reactive, toRef, resolveDirective, onUnmounted, Teleport, renderSlot, isVNode, isRef as isRef$1, useSlots, createApp, h, render, readonly, nextTick as nextTick$1, onUpdated, shallowRef, onBeforeMount, unref as unref$1 } from "vue";
 const accordionProps = {
   data: {
     type: Array,
@@ -995,16 +995,64 @@ const backTopProps = {
   right: {
     type: String,
     default: "30px"
+  },
+  target: {
+    type: String,
+    default: "window"
+  },
+  visibleHeight: {
+    type: Number,
+    default: 300
   }
 };
 function usePosition(props) {
   const { bottom, right } = props;
   return {
-    position: "fixed",
     bottom,
     right
   };
 }
+function useTarget(props, backTopRef) {
+  const target = props.target;
+  const getTargetEl = () => {
+    const targetEl = document.querySelector(target);
+    if (!targetEl)
+      throw new Error(`props ${target} is not existed`);
+    targetEl.parentElement.style.position = "relative";
+    backTopRef.value.style.position = "absolute";
+    return targetEl;
+  };
+  const currTarget = target === "window" ? window || document.documentElement || document.body : getTargetEl();
+  return currTarget;
+}
+function useVisibility(props, backTopRef) {
+  const visibleHeight = props.visibleHeight;
+  const currScrollTop = ref(0);
+  const ThrottleCBFn = function() {
+    currScrollTop.value = currTarget === window ? window.pageYOffset : currTarget.scrollTop;
+  };
+  let currTarget = null;
+  onMounted(() => {
+    currTarget = useTarget(props, backTopRef);
+    useEventListener(currTarget, "scroll", useThrottle(ThrottleCBFn, 150));
+  });
+  const isVisible = computed(() => currScrollTop.value >= visibleHeight);
+  return isVisible;
+}
+function useEventListener(target, event, cb) {
+  if (target)
+    target.addEventListener(event, cb);
+}
+function useThrottle(fn, delay) {
+  let last2 = null;
+  return (...args) => {
+    const now2 = +Date.now();
+    if (now2 - last2 > delay) {
+      last2 = now2;
+      return fn.apply(this, args);
+    }
+  };
+}
 var backTop = "";
 var IconTop = "data:image/svg+xml;base64,PHN2ZyB0PSIxNjM2MjU2NTI0MjUxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0NTciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTAgMGgxMDI0djEwMjRIMHoiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMCIgcC1pZD0iMzQ1OCI+PC9wYXRoPjxwYXRoIGQ9Ik04NzguOTMzMzMzIDY1OC40MTA2NjdhNDEuNjg1MzMzIDQxLjY4NTMzMyAwIDAgMS01OC45NDQgMC4zMmwtMzA3Ljk2OC0zMDQuNjRMMjA0LjAxMDY2NyA2NTguNzczMzMzYTQxLjY4NTMzMyA0MS42ODUzMzMgMCAwIDEtNTguNTYgMC4wNjQgNDAuNjE4NjY3IDQwLjYxODY2NyAwIDAgMS0wLjA2NC01Ny44MTMzMzNsMzM1LjQyNC0zMzEuNzMzMzMzYTQxLjU3ODY2NyA0MS41Nzg2NjcgMCAwIDEgMzEuMDQtMTIuMDEwNjY3IDQxLjQ5MzMzMyA0MS40OTMzMzMgMCAwIDEgMzEuMzYgMTEuOTg5MzMzbDMzNS40MDI2NjYgMzMxLjczMzMzNGMxNS45MzYgMTUuNzg2NjY3IDE2LjA4NTMzMyA0MS40OTMzMzMgMC4zMiA1Ny40MjkzMzN6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIzNDU5Ij48L3BhdGg+PHBhdGggZD0iTTU1NC42NjY2NjcgMzYyLjY2NjY2N3Y1MzMuMzMzMzMzYTQyLjY2NjY2NyA0Mi42NjY2NjcgMCAxIDEtODUuMzMzMzM0IDBWMzYyLjY2NjY2N2E0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDg1LjMzMzMzNCAwek0xMjggODUuMzMzMzMzaDc2OGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDAgODUuMzMzMzM0SDEyOGE0Mi42NjY2NjcgNDIuNjY2NjY3IDAgMSAxIDAtODUuMzMzMzM0eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMzQ2MCI+PC9wYXRoPjwvc3ZnPg==";
 var BackTop = defineComponent$1({
@@ -1012,8 +1060,10 @@ var BackTop = defineComponent$1({
   props: backTopProps,
   emits: [],
   setup(props, ctx2) {
-    const position = usePosition(props);
     const slots = ctx2.slots;
+    const backTopRef = ref(null);
+    const position = usePosition(props);
+    let isVisible = useVisibility(props, backTopRef);
     const scrollToTop = () => {
       window && window.scrollTo({
         top: 0,
@@ -1023,7 +1073,10 @@ var BackTop = defineComponent$1({
     };
     return () => createVNode("div", {
       "class": "devui-back-top",
-      "style": __spreadValues({}, position),
+      "ref": backTopRef,
+      "style": __spreadProps(__spreadValues({}, position), {
+        display: isVisible.value ? "block" : "none"
+      }),
       "onClick": scrollToTop
     }, [createVNode("div", {
       "class": ["devui-back-top-base", slots.default ? "devui-backtop-custom" : "devui-back-top-content"]
@@ -1036,7 +1089,7 @@ BackTop.install = function(app) {
 var BackTopInstall = {
   title: "BackTop \u56DE\u5230\u9876\u90E8",
   category: "\u5BFC\u822A",
-  status: "10%",
+  status: "60%",
   install(app) {
     app.use(BackTop);
   }
@@ -1289,7 +1342,7 @@ var Icon = defineComponent$1({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
@@ -1301,7 +1354,7 @@ var Icon = defineComponent$1({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -1689,7 +1742,7 @@ var Carousel = defineComponent$1({
     const slot = (_b = (_a = $slots.default) == null ? void 0 : _a.call($slots)) != null ? _b : [];
     let children = slot;
     if (children.length === 1 && children[0].type === Fragment) {
-      children = (children[0].children || []).filter((item2) => (item2 == null ? void 0 : item2.type) !== Comment);
+      children = (children[0].children || []).filter((item2) => (item2 == null ? void 0 : item2.type) !== Comment$1);
     }
     if (children.length !== itemCount) {
       changeItemCount(children.length);
@@ -4229,6 +4282,61 @@ var CheckboxInstall = {
     app.use(DCheckboxGroup);
   }
 };
+const commentProps = {
+  actions: {},
+  author: {},
+  avatar: {},
+  content: {},
+  prefixCls: {},
+  datetime: {}
+};
+var comment = "";
+var Comment = defineComponent$1({
+  name: "DComment",
+  props: commentProps,
+  emits: [],
+  slots: ["actions", "author", "avatar", "content", "datetime"],
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      const actions = (_b = props.actions) != null ? _b : (_a = slots.actions) == null ? void 0 : _a.call(slots);
+      const author = (_d = props.author) != null ? _d : (_c = slots.author) == null ? void 0 : _c.call(slots);
+      const avatar2 = (_f = props.avatar) != null ? _f : (_e = slots.avatar) == null ? void 0 : _e.call(slots);
+      const content2 = (_h = props.content) != null ? _h : (_g = slots.content) == null ? void 0 : _g.call(slots);
+      const datetime = (_j = props.datetime) != null ? _j : (_i = slots.datetime) == null ? void 0 : _i.call(slots);
+      return createVNode("div", {
+        "class": "devui-comment"
+      }, [createVNode("div", {
+        "class": "devui-comment-avatar"
+      }, [avatar2]), createVNode("div", {
+        "class": "devui-comment-right"
+      }, [createVNode("div", {
+        "class": "devui-comment-head"
+      }, [createVNode("div", {
+        "class": "devui-comment-author"
+      }, [author]), createVNode("div", {
+        "class": "devui-comment-datetime"
+      }, [datetime])]), createVNode("div", {
+        "class": "devui-comment-content"
+      }, [content2]), createVNode("div", {
+        "class": "devui-comment-actions"
+      }, [actions])])]);
+    };
+  }
+});
+Comment.install = function(app) {
+  app.component(Comment.name, Comment);
+};
+var CommentInstall = {
+  title: "Comment \u8BC4\u8BBA",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "50%",
+  install(app) {
+    app.use(Comment);
+  }
+};
 const getDateTime = (d) => {
   const year = d.getFullYear();
   const month = d.getMonth() + 1;
@@ -4463,27 +4571,27 @@ const inputProps = {
     type: Boolean,
     default: false
   },
-  value: {
+  modelValue: {
     type: String,
     default: ""
   },
-  "onUpdate:value": {
+  "update:modelValue": {
     type: Function,
     default: void 0
   },
-  "onChange": {
+  onChange: {
     type: Function,
     default: void 0
   },
-  "onKeydown": {
+  onKeydown: {
     type: Function,
     default: void 0
   },
-  "onFocus": {
+  onFocus: {
     type: Function,
     default: void 0
   },
-  "onBlur": {
+  onBlur: {
     type: Function,
     default: void 0
   }
@@ -4517,6 +4625,10 @@ const formProps = {
   name: {
     type: String,
     default: ""
+  },
+  messageShowType: {
+    type: String,
+    default: "popover"
   }
 };
 const formItemProps = {
@@ -4576,7 +4688,7 @@ var DInput = defineComponent$1({
     }
   },
   props: inputProps,
-  emits: ["update:value", "focus", "blur", "change", "keydown"],
+  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
   setup(props, ctx2) {
     const formItem2 = inject(formItemInjectionKey, {});
     const hasFormItem = Object.keys(formItem2).length > 0;
@@ -4596,11 +4708,11 @@ var DInput = defineComponent$1({
     }, {
       immediate: true
     });
-    watch(() => props.value, (value) => {
+    watch(() => props.modelValue, (value) => {
       value && value.length > 0 && showPreviewIcon.value ? showPwdIcon.value = true : showPwdIcon.value = false;
     });
     const onInput = ($event) => {
-      ctx2.emit("update:value", $event.target.value);
+      ctx2.emit("update:modelValue", $event.target.value);
       hasFormItem && formItem2.formItemMitt.emit(dFormItemEvents.input);
     }, onFocus = () => {
       ctx2.emit("focus");
@@ -4630,7 +4742,7 @@ var DInput = defineComponent$1({
   },
   render() {
     const {
-      value,
+      modelValue,
       showPreviewIcon,
       showPwdIcon,
       inputCls,
@@ -4651,7 +4763,7 @@ var DInput = defineComponent$1({
     }, [withDirectives(createVNode("input", mergeProps({
       dinput: true
     }, {
-      "value": value,
+      "value": modelValue,
       "disabled": disabled,
       "type": inputType,
       "maxlength": maxLength,
@@ -9895,7 +10007,7 @@ var lodash = { exports: {} };
         }
         return func(collection, getIteratee(predicate, 3));
       }
-      function filter(collection, predicate) {
+      function filter2(collection, predicate) {
         var func = isArray2(collection) ? arrayFilter2 : baseFilter;
         return func(collection, getIteratee(predicate, 3));
       }
@@ -11295,7 +11407,7 @@ var lodash = { exports: {} };
       lodash2.dropRightWhile = dropRightWhile;
       lodash2.dropWhile = dropWhile;
       lodash2.fill = fill;
-      lodash2.filter = filter;
+      lodash2.filter = filter2;
       lodash2.flatMap = flatMap;
       lodash2.flatMapDeep = flatMapDeep;
       lodash2.flatMapDepth = flatMapDepth;
@@ -11974,7 +12086,8 @@ var Form = defineComponent$1({
         labelAlign: props.labelAlign
       },
       rules: props.rules,
-      columnsClass: props.columnsClass
+      columnsClass: props.columnsClass,
+      messageShowType: "popover"
     });
     const onSubmit = (e) => {
       e.preventDefault();
@@ -13343,9 +13456,9 @@ var FormControl = defineComponent$1({
         "class": `devui-form-control-container${isHorizontal ? " devui-form-control-container-horizontal" : ""}${feedbackStatus ? " has-feedback" : ""}${feedbackStatus === "error" ? " feedback-error" : ""}`
       }, [createVNode("div", {
         "class": "devui-control-content-wrapper"
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), createVNode("div", {
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), showPopover.value && createVNode("div", {
         "class": "devui-popover-wrapper"
-      }, [showPopover.value && createVNode(Popover, {
+      }, [createVNode(Popover, {
         "visible": true,
         "content": tipMessage.value,
         "popType": "error",
@@ -13544,6 +13657,11 @@ function handleValidatePass(el, tipEl) {
   tipEl.style.display = "none";
   handleErrorStrategyPass(el);
 }
+function getRefName(binding) {
+  const _refs = binding.instance.$refs;
+  const refName = Object.keys(_refs)[0];
+  return refName;
+}
 function getFormName(binding) {
   const _refs = binding.instance.$refs;
   const key = Object.keys(_refs)[0];
@@ -13573,15 +13691,20 @@ function checkValidPopsition(positionStr) {
 }
 var dValidateRules = {
   mounted(el, binding, vnode) {
+    var _a;
     const isFormTag = el.tagName === "FORM";
     const dfcUID = el.parentNode.parentNode.parentElement.dataset.uid;
+    const refName = getRefName(binding);
     const hasOptions = isObject$1(binding.value) && hasKey(binding.value, "options");
-    const {
+    let {
       rules: bindingRules,
       options = {},
       messageShowType = MessageShowTypeEnum.popover
     } = binding.value;
     let { errorStrategy } = binding.value;
+    if (refName) {
+      messageShowType = (_a = binding.instance[refName]["messageShowType"]) != null ? _a : "popover";
+    }
     let {
       updateOn = UpdateOnEnum.change,
       errorStrategy: ErrorStrategy = ErrorStrategyEnum.dirty,
@@ -15067,6 +15190,82 @@ var ImagePreviewInstall = {
     app.config.globalProperties.$imagePreviewService = ImagePreviewService;
   }
 };
+var inputIcon = "";
+const inputIconProps = __spreadProps(__spreadValues({}, inputProps), {
+  name: {
+    type: String,
+    value: "calendar",
+    required: false
+  },
+  onIconclick: {
+    type: Function,
+    required: false
+  },
+  iconBgColor: {
+    type: String,
+    value: "transparent"
+  },
+  iconColor: {
+    type: String,
+    value: "#000000"
+  }
+});
+var InputIcon = defineComponent$1({
+  name: "DInputIcon",
+  props: inputIconProps,
+  setup(props, ctx2) {
+    const _a = props, {
+      name,
+      onIconclick,
+      onChange,
+      iconBgColor,
+      iconColor
+    } = _a, inputProps2 = __objRest(_a, [
+      "name",
+      "onIconclick",
+      "onChange",
+      "iconBgColor",
+      "iconColor"
+    ]);
+    const state = reactive({
+      value: ""
+    });
+    const onInputChange = (v) => {
+      state.value = v;
+      typeof onChange === "function" && onChange(state.value);
+    };
+    const onIconClick = (e) => {
+      typeof onIconclick === "function" && onIconclick(state.value, e);
+    };
+    return () => {
+      return createVNode("div", {
+        "class": "d-input-icon-container"
+      }, [createVNode("label", null, [createVNode(DInput, mergeProps(inputProps2, {
+        "onChange": onInputChange
+      }), null)]), createVNode("span", {
+        "onClick": onIconClick,
+        "style": {
+          backgroundColor: iconBgColor
+        }
+      }, [createVNode(Icon, {
+        "size": "small",
+        "name": name,
+        "color": iconColor
+      }, null)])]);
+    };
+  }
+});
+InputIcon.install = function(app) {
+  app.component(InputIcon.name, InputIcon);
+};
+var InputIconInstall = {
+  title: "InputIcon\u8F93\u5165\u6846",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "75%",
+  install(app) {
+    app.use(InputIcon);
+  }
+};
 const inputNumberProps = {
   placeholder: {
     type: String,
@@ -20503,6 +20702,10 @@ var StatusInstall = {
 var stepsGuide = "";
 const stepsGuideProps = {
   steps: Array,
+  stepIndex: {
+    type: Number,
+    default: void 0
+  },
   showClose: {
     type: Boolean,
     default: true
@@ -20510,22 +20713,33 @@ const stepsGuideProps = {
   showDots: {
     type: Boolean,
     default: true
+  },
+  scrollToTargetSwitch: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: 1100
+  },
+  stepChange: {
+    type: Function,
+    default() {
+      return true;
+    }
   }
 };
-function useStepsGuideNav(steps, stepIndex) {
-  const currentStep = computed(() => {
-    const _step = steps[stepIndex.value];
-    _step.position = _step.position || "top";
-    return _step;
-  });
+function useStepsGuidePosition(props, currentStep) {
   const guideClassList = ["devui-steps-guide"];
   const stepsRef = ref(null);
   const guidePosition = reactive({
     left: "",
     top: "",
-    zIndex: 1100
+    zIndex: props.zIndex
   });
   const updateGuidePosition = () => {
+    if (!currentStep.value)
+      return;
     const baseTop = window.pageYOffset - document.documentElement.clientTop;
     const baseLeft = window.pageXOffset - document.documentElement.clientLeft;
     const currentStepPosition = currentStep.value.position;
@@ -20571,96 +20785,97 @@ function useStepsGuideNav(steps, stepIndex) {
     }
     guidePosition.left = _left + "px";
     guidePosition.top = _top + "px";
-    nextTick$1(() => {
-      stepGuideElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-    });
+    if (props.scrollToTargetSwitch) {
+      nextTick$1(() => {
+        stepGuideElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      });
+    }
   };
   return {
-    currentStep,
     stepsRef,
     guidePosition,
     guideClassList,
     updateGuidePosition
   };
 }
-function useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition) {
-  const showSteps = ref(true);
-  const closeSteps = () => {
-    showSteps.value = false;
+function useStepsGuideCtrl(props, ctx2, updateGuidePosition, stepIndex) {
+  const stepsCount = computed(() => props.steps.length);
+  const closeGuide = () => {
+    const _index = stepIndex.value;
+    stepIndex.value = -1;
+    nextTick$1(() => {
+      ctx2.emit("guide-close", _index);
+    });
   };
   const setCurrentIndex = (index2) => {
-    if (index2 > stepsCount.value || index2 < 0)
-      index2 = 0;
-    stepIndex.value = index2;
-    if (!showSteps.value) {
-      showSteps.value = true;
-      nextTick$1(() => {
-        updateGuidePosition();
-      });
-    } else {
-      updateGuidePosition();
+    if (index2 !== -1 && props.stepChange()) {
+      if (index2 > -1 && index2 < stepsCount.value) {
+        stepIndex.value = index2;
+        console.log(stepIndex.value, index2, stepsCount.value);
+        nextTick$1(() => {
+          console.log(stepIndex.value, index2, stepsCount.value);
+          updateGuidePosition();
+        });
+      } else {
+        console.error(`stepIndex is not within the value range`);
+      }
     }
+    if (index2 === -1)
+      closeGuide();
   };
   return {
-    showSteps,
-    closeSteps,
+    stepsCount,
+    closeGuide,
     setCurrentIndex
   };
 }
 var StepsGuide = defineComponent$1({
   name: "DStepsGuide",
   props: stepsGuideProps,
-  emits: [],
+  emits: ["guide-close", "update:stepIndex"],
   setup(props, ctx2) {
-    const stepsCount = computed(() => props.steps.length - 1);
-    const stepIndex = ref(0);
+    var _a;
+    const stepIndexData = ref((_a = props.stepIndex) != null ? _a : 0);
+    const stepIndex = computed({
+      set: (val) => {
+        if (props.stepIndex != null) {
+          ctx2.emit("update:stepIndex", val);
+        }
+        stepIndexData.value = val;
+      },
+      get: () => stepIndexData.value
+    });
+    const currentStep = computed(() => {
+      const _step = props.steps[stepIndex.value];
+      if (_step)
+        _step.position = _step.position || "top";
+      return _step;
+    });
     const {
-      currentStep,
       stepsRef,
       guidePosition,
       guideClassList,
       updateGuidePosition
-    } = useStepsGuideNav(props.steps, stepIndex);
+    } = useStepsGuidePosition(props, currentStep);
     const {
-      showSteps,
-      closeSteps,
+      stepsCount,
+      closeGuide,
       setCurrentIndex
-    } = useStepsGuideCtrl(stepsCount, stepIndex, updateGuidePosition);
+    } = useStepsGuideCtrl(props, ctx2, updateGuidePosition, stepIndex);
     onMounted(() => {
       updateGuidePosition();
     });
-    return {
-      stepsCount,
-      stepIndex,
-      showSteps,
-      guidePosition,
-      guideClassList,
-      stepsRef,
-      currentStep,
-      setCurrentIndex,
-      closeSteps
-    };
-  },
-  render(props) {
-    const {
-      showSteps,
-      guidePosition,
-      guideClassList,
-      currentStep,
-      stepIndex,
-      stepsCount,
-      setCurrentIndex,
-      closeSteps,
-      showClose,
-      showDots
-    } = props;
-    return showSteps ? createVNode(Teleport, {
+    ctx2.expose({
+      closeGuide,
+      setCurrentIndex
+    });
+    return () => stepIndex.value > -1 && stepsCount.value > 0 ? createVNode(Teleport, {
       "to": "body"
     }, {
       default: () => [createVNode("div", {
         "style": guidePosition,
         "class": guideClassList,
-        "ref": "stepsRef"
+        "ref": stepsRef
       }, [createVNode("div", {
         "class": "devui-shining-dot"
       }, null), createVNode("div", {
@@ -20671,45 +20886,52 @@ var StepsGuide = defineComponent$1({
         "class": "devui-guide-container"
       }, [createVNode("p", {
         "class": "devui-title"
-      }, [currentStep.title]), showClose ? createVNode("div", {
+      }, [currentStep.value.title]), props.showClose ? createVNode("div", {
         "class": "icon icon-close",
-        "onClick": closeSteps
+        "onClick": closeGuide
       }, null) : null, createVNode("div", {
         "class": "devui-content"
-      }, [currentStep.content]), createVNode("div", {
+      }, [currentStep.value.content]), createVNode("div", {
         "class": "devui-ctrl"
-      }, [showDots ? createVNode("div", {
+      }, [props.showDots ? createVNode("div", {
         "class": "devui-dots"
       }, [props.steps.map((step, index2) => {
         return createVNode("em", {
-          "class": ["icon icon-dot-status", currentStep === step ? "devui-active" : ""],
+          "class": ["icon icon-dot-status", currentStep.value === step ? "devui-active" : ""],
           "key": index2
         }, null);
       })]) : null, createVNode("div", {
         "class": "devui-guide-btn"
-      }, [stepIndex > 0 ? createVNode("div", {
+      }, [stepIndex.value > 0 ? createVNode("div", {
         "class": "devui-prev-step",
-        "onClick": () => setCurrentIndex(--props.stepIndex)
-      }, ["\u4E0A\u4E00\u6B65"]) : null, stepIndex === stepsCount ? createVNode("div", {
-        "onClick": closeSteps
+        "onClick": () => setCurrentIndex(stepIndex.value - 1)
+      }, ["\u4E0A\u4E00\u6B65"]) : null, stepIndex.value === stepsCount.value - 1 ? createVNode("div", {
+        "onClick": closeGuide
       }, ["\u6211\u77E5\u9053\u5566"]) : createVNode("div", {
         "class": "devui-next-step",
         "onClick": () => {
-          setCurrentIndex(++props.stepIndex);
+          setCurrentIndex(stepIndex.value + 1);
         }
       }, ["\u6211\u77E5\u9053\u5566,\u7EE7\u7EED"])])])])])]
     }) : null;
   }
 });
+var StepsGuideDirective = {
+  mounted(el, binding, vNode) {
+  },
+  updated(el, binding) {
+  }
+};
 StepsGuide.install = function(app) {
   app.component(StepsGuide.name, StepsGuide);
 };
 var StepsGuideInstall = {
   title: "StepsGuide \u64CD\u4F5C\u6307\u5F15",
   category: "\u5BFC\u822A",
-  status: "50%",
+  status: "80%",
   install(app) {
     app.use(StepsGuide);
+    app.directive("StepsGuide", StepsGuideDirective);
   }
 };
 var Sticky = defineComponent$1({
@@ -21014,15 +21236,57 @@ const TableProps = {
     type: Boolean,
     default: false
   },
-  headerBg: {
+  scrollable: {
+    type: Boolean,
+    default: false
+  },
+  maxWidth: {
+    type: String
+  },
+  maxHeight: {
+    type: String
+  },
+  tableWidth: {
+    type: String
+  },
+  tableHeight: {
+    type: String
+  },
+  size: {
+    type: String,
+    validator(value) {
+      return value === "sm" || value === "md" || value === "lg";
+    }
+  },
+  rowHoveredHighlight: {
+    type: Boolean,
+    default: true
+  },
+  fixHeader: {
     type: Boolean,
     default: false
   },
+  checkable: {
+    type: Boolean,
+    default: true
+  },
   tableLayout: {
     type: String,
-    default: "fixed"
+    default: "auto",
+    validator(v) {
+      return v === "fixed" || v === "auto";
+    }
+  },
+  showLoading: {
+    type: Boolean,
+    default: false
+  },
+  headerBg: {
+    type: Boolean,
+    default: false
   }
 };
+const TABLE_TOKEN = Symbol();
 function useTable(props) {
   const classes = computed(() => ({
     "devui-table": true,
@@ -21030,170 +21294,541 @@ function useTable(props) {
     "header-bg": props.headerBg,
     "table-layout-auto": props.tableLayout === "auto"
   }));
-  return { classes };
+  const style2 = computed(() => ({
+    maxHeight: props.maxHeight,
+    maxWidth: props.maxWidth,
+    height: props.tableHeight,
+    width: props.tableWidth
+  }));
+  return { classes, style: style2 };
 }
-function createStore(props) {
+const useFixedColumn = (column) => {
+  const stickyCell = computed(() => {
+    const col2 = column.value;
+    if (col2.fixedLeft) {
+      return `devui-sticky-cell left`;
+    }
+    if (col2.fixedRight) {
+      return `devui-sticky-cell right`;
+    }
+    return void 0;
+  });
+  const offsetStyle = computed(() => {
+    const col2 = column.value;
+    if (col2.fixedLeft) {
+      return `left:${col2.fixedLeft}`;
+    }
+    if (col2.fixedRight) {
+      return `right:${col2.fixedRight}`;
+    }
+    return void 0;
+  });
+  return {
+    stickyCell,
+    offsetStyle
+  };
+};
+function createStore(dataSource) {
   const _data = ref([]);
+  watch(dataSource, (value) => {
+    _data.value = [...value];
+  }, { deep: true, immediate: true });
+  const { _columns, insertColumn, removeColumn, sortColumn } = createColumnGenerator();
+  const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
+  const { sortData } = createSorter(dataSource, _data);
+  const { filterData, resetFilterData } = createFilter(dataSource, _data);
+  const { isFixedLeft } = createFixedLogic(_columns);
+  return {
+    states: {
+      _data,
+      _columns,
+      _checkList,
+      _checkAll,
+      _halfChecked,
+      isFixedLeft
+    },
+    insertColumn,
+    sortColumn,
+    removeColumn,
+    getCheckedRows,
+    sortData,
+    filterData,
+    resetFilterData
+  };
+}
+const createColumnGenerator = () => {
   const _columns = ref([]);
-  updateData();
-  watch(() => props.data, updateData, { deep: true });
-  function updateData() {
-    _data.value = [];
-    props.data.forEach((item2) => {
-      _data.value.push(item2);
-    });
-  }
   const insertColumn = (column) => {
     _columns.value.push(column);
+    _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
+  };
+  const sortColumn = () => {
+    _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
+  };
+  const removeColumn = (column) => {
+    const i = _columns.value.findIndex((v) => v === column);
+    if (i === -1) {
+      return;
+    }
+    _columns.value.splice(i, 1);
+  };
+  return { _columns, insertColumn, removeColumn, sortColumn };
+};
+const createSelection = (dataSource, _data) => {
+  const _checkList = ref([]);
+  const _checkAllRecord = ref(false);
+  const _checkAll = computed({
+    get: () => _checkAllRecord.value,
+    set: (val) => {
+      _checkAllRecord.value = val;
+      for (let i = 0; i < _checkList.value.length; i++) {
+        _checkList.value[i] = val;
+      }
+    }
+  });
+  const _halfChecked = ref(false);
+  watch(dataSource, (value) => {
+    _checkList.value = new Array(value.length).fill(false);
+  }, { deep: true, immediate: true });
+  watch(_checkList, (list) => {
+    if (list.length === 0) {
+      return;
+    }
+    let allTrue = true;
+    let allFalse = true;
+    for (let i = 0; i < list.length; i++) {
+      allTrue && (allTrue = list[i]);
+      allFalse && (allFalse = !list[i]);
+    }
+    _checkAllRecord.value = allTrue;
+    _halfChecked.value = !(allFalse || allTrue);
+  }, { immediate: true, deep: true });
+  const getCheckedRows = () => {
+    return _data.value.filter((_, index2) => _checkList.value[index2]);
   };
   return {
-    insertColumn,
-    states: {
-      _data,
-      _columns
+    _checkList,
+    _checkAll,
+    _halfChecked,
+    getCheckedRows
+  };
+};
+const createSorter = (dataSource, _data) => {
+  const sortData = (field, direction, compareFn = (field2, a, b) => a[field2] > b[field2]) => {
+    if (direction === "ASC") {
+      _data.value = _data.value.sort((a, b) => compareFn(field, a, b) ? 1 : -1);
+    } else if (direction === "DESC") {
+      _data.value = _data.value.sort((a, b) => !compareFn(field, a, b) ? 1 : -1);
+    } else {
+      _data.value = [...dataSource.value];
     }
   };
-}
+  return { sortData };
+};
+const createFilter = (dataSource, _data) => {
+  const fieldSet = new Set();
+  const filterData = (field, results2) => {
+    fieldSet.add(field);
+    const fields = [...fieldSet];
+    _data.value = dataSource.value.filter((item2) => {
+      return fields.reduce((prev, field2) => {
+        return prev && results2.indexOf(item2[field2]) !== -1;
+      }, true);
+    });
+  };
+  const resetFilterData = () => {
+    fieldSet.clear();
+    _data.value = [...dataSource.value];
+  };
+  return { filterData, resetFilterData };
+};
+const createFixedLogic = (columns) => {
+  const isFixedLeft = computed(() => {
+    return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
+  });
+  return { isFixedLeft };
+};
 var ColGroup = defineComponent$1({
   name: "DColGroup",
   setup() {
-    const parent2 = inject("table");
+    const parent2 = inject(TABLE_TOKEN);
     const columns = parent2.store.states._columns;
-    return {
-      columns
-    };
-  },
-  render() {
-    const {
-      columns
-    } = this;
-    return createVNode("colgroup", null, [columns.map((column, index2) => {
+    return () => parent2.props.tableLayout === "fixed" ? createVNode("colgroup", null, [parent2.props.checkable ? createVNode("col", {
+      "width": 36
+    }, null) : null, columns.value.map((column, index2) => {
       return createVNode("col", {
         "key": index2,
         "width": column.realWidth
       }, null);
-    })]);
+    })]) : null;
   }
 });
-const TableHeaderProps = {
-  store: {
-    type: Object,
-    default: {}
-  }
-};
-var header = "";
-var TableHeader = defineComponent$1({
-  name: "DTableHeader",
-  props: TableHeaderProps,
-  setup(props) {
-    const {
-      store
-    } = toRefs(props);
-    const columns = store.value.states._columns.value;
-    return {
-      columns
-    };
+var sort = "";
+const Sort = defineComponent$1({
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    "onUpdate:modelValue": {
+      type: Function
+    }
   },
-  render() {
-    const {
-      columns
-    } = this;
-    return createVNode("thead", {
-      "class": "devui-thead"
-    }, [createVNode("tr", null, [columns.map((column, index2) => {
-      return createVNode("th", {
-        "key": index2
-      }, [column.renderHeader()]);
-    })])]);
+  emits: ["update:modelValue"],
+  setup(props, ctx2) {
+    const changeDirection = () => {
+      let direction = "";
+      if (props.modelValue === "ASC") {
+        direction = "DESC";
+      } else if (props.modelValue === "DESC") {
+        direction = "";
+      } else {
+        direction = "ASC";
+      }
+      ctx2.emit("update:modelValue", direction);
+    };
+    return () => createVNode("span", {
+      "onClick": changeDirection,
+      "class": "sort-clickable"
+    }, [createVNode("i", {
+      "class": ["datatable-svg", {
+        "sort-icon-default": !props.modelValue,
+        "sort-icon-asc": props.modelValue === "ASC",
+        "sort-icon-desc": props.modelValue === "DESC"
+      }]
+    }, [createVNode("svg", {
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "xmlns:xlink": "http://www.w3.org/1999/xlink"
+    }, [createVNode("defs", null, [createVNode("circle", {
+      "id": "sort-svg-path-1",
+      "cx": "8",
+      "cy": "8",
+      "r": "8"
+    }, null), createVNode("filter", {
+      "x": "-34.4%",
+      "y": "-21.9%",
+      "width": "168.8%",
+      "height": "168.8%",
+      "filterUnits": "objectBoundingBox",
+      "id": "filter-2"
+    }, [createVNode("feOffset", {
+      "dx": "0",
+      "dy": "2",
+      "in": "SourceAlpha",
+      "result": "shadowOffsetOuter1"
+    }, null), createVNode("feGaussianBlur", {
+      "stdDeviation": "1.5",
+      "in": "shadowOffsetOuter1",
+      "result": "shadowBlurOuter1"
+    }, null), createVNode("feColorMatrix", {
+      "values": "0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.085309222 0",
+      "type": "matrix",
+      "in": "shadowBlurOuter1"
+    }, null)])]), createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("use", {
+      "fill-rule": "evenodd",
+      "xlink:href": "#sort-svg-path-1"
+    }, null), createVNode("polygon", {
+      "points": "8 4 11 7 5 7"
+    }, null), createVNode("polygon", {
+      "points": "8 12 5 9 11 9"
+    }, null)])])])]);
   }
 });
-const TableBodyProps = {
-  store: {
-    type: Object,
-    default: {}
+var filter = "";
+const Filter = defineComponent$1({
+  props: {
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    "onUpdate:modelValue": {
+      type: Function
+    },
+    customTemplate: {
+      type: Function
+    },
+    filterList: {
+      type: Array,
+      required: true
+    },
+    filterMultiple: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const filterOrigin = ref(null);
+    const onUpdateChecked = (config, value) => {
+      const checkedList = props.modelValue;
+      const update = props["onUpdate:modelValue"];
+      const contained = !!checkedList.find((item2) => item2 === config.value);
+      if (value && !contained) {
+        update == null ? void 0 : update([...checkedList, config.value]);
+      } else if (!value && contained) {
+        update == null ? void 0 : update(checkedList.filter((item2) => config.value !== item2));
+      }
+    };
+    const updateSingleChecked = (config) => {
+      var _a;
+      (_a = props["onUpdate:modelValue"]) == null ? void 0 : _a.call(props, [config.value]);
+    };
+    const dropdownContent = computed(() => {
+      const checkedList = props.modelValue;
+      const isContained = (config) => !!checkedList.find((item2) => item2 === config.value);
+      return () => createVNode("ul", {
+        "class": "devui-dropdown-menu data-table-column-filter-content",
+        "style": "padding:10px"
+      }, [props.filterList.map((item2, index2) => {
+        return createVNode("li", {
+          "style": index2 > 0 ? "margin-top:10px" : ""
+        }, [props.filterMultiple ? createVNode(Checkbox, {
+          "modelValue": isContained(item2),
+          "onUpdate:modelValue": (value) => onUpdateChecked(item2, value)
+        }, {
+          default: () => [item2.name]
+        }) : createVNode("span", {
+          "onClick": () => updateSingleChecked(item2)
+        }, [item2.name])]);
+      })]);
+    });
+    return () => createVNode(Fragment, null, [createVNode("span", {
+      "ref": filterOrigin
+    }, [createVNode("i", {
+      "class": ["filter-icon", {
+        "filter-icon-active": true
+      }]
+    }, [createVNode("svg", {
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "xmlns:xlink": "http://www.w3.org/1999/xlink"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("g", null, [createVNode("polygon", {
+      "points": "10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"
+    }, null)])])])])]), createVNode(Dropdown, {
+      "origin": filterOrigin.value,
+      "closeScope": "blank"
+    }, {
+      default: () => {
+        var _a, _b;
+        return [(_b = (_a = props.customTemplate) == null ? void 0 : _a.call(props, {
+          value: props.modelValue,
+          onChange: props["onUpdate:modelValue"]
+        })) != null ? _b : dropdownContent.value()];
+      }
+    })]);
   }
+});
+var header = "";
+var body = "";
+const useSort = (store, column) => {
+  const directionRef = ref("DESC");
+  watch([directionRef, column], ([direction, column2]) => {
+    if (column2.sortable) {
+      store.sortData(column2.field, direction, column2.compareFn);
+    }
+  }, { immediate: true });
+  return directionRef;
 };
-function useTableBody(props) {
-  const storeData = props.store.states;
-  const rowColumns = computed(() => {
-    return storeData._data.value.map((row2) => {
-      const obj = Object.assign({}, row2);
-      obj.columns = storeData._columns.value;
-      return obj;
-    });
+const useFliter = (store, column) => {
+  const filteredRef = shallowRef();
+  watch(filteredRef, (results2) => {
+    store.filterData(column.value.field, results2);
   });
-  return { rowColumns };
-}
-var body = "";
-var TableBody = defineComponent$1({
-  name: "DTableBody",
-  props: TableBodyProps,
-  setup(props) {
+  return filteredRef;
+};
+var TableHeader = defineComponent$1({
+  name: "DTableHeader",
+  setup() {
+    const table2 = inject(TABLE_TOKEN);
     const {
-      rowColumns
-    } = useTableBody(props);
-    return {
-      rowColumns
+      _checkAll: checkAll,
+      _halfChecked: halfChecked,
+      _columns: columns,
+      isFixedLeft
+    } = table2.store.states;
+    const thAttrs = computed(() => isFixedLeft.value ? {
+      class: "devui-sticky-cell left",
+      style: "left:0;"
+    } : null);
+    const checkbox2 = computed(() => table2.props.checkable ? createVNode("th", thAttrs.value, [createVNode(Checkbox, {
+      "style": "padding:10px;",
+      "modelValue": checkAll.value,
+      "onUpdate:modelValue": ($event) => checkAll.value = $event,
+      "halfchecked": halfChecked.value
+    }, null)]) : null);
+    return () => {
+      return createVNode("thead", {
+        "class": "devui-thead"
+      }, [createVNode("tr", null, [checkbox2.value, columns.value.map((column, index2) => createVNode(Th, {
+        "key": index2,
+        "column": column
+      }, null))])]);
     };
+  }
+});
+const Th = defineComponent$1({
+  props: {
+    column: {
+      type: Object,
+      required: true
+    }
   },
-  render() {
+  setup(props) {
+    const table2 = inject(TABLE_TOKEN);
     const {
-      rowColumns
-    } = this;
-    return createVNode("tbody", {
+      column
+    } = toRefs(props);
+    const directionRef = useSort(table2.store, column);
+    const filteredRef = useFliter(table2.store, column);
+    const {
+      stickyCell,
+      offsetStyle
+    } = useFixedColumn(column);
+    return () => createVNode("th", {
+      "class": stickyCell.value,
+      "style": offsetStyle.value
+    }, [createVNode("div", {
+      "class": "header-container"
+    }, [props.column.renderHeader(), props.column.filterable && createVNode(Filter, {
+      "modelValue": filteredRef.value,
+      "onUpdate:modelValue": ($event) => filteredRef.value = $event,
+      "filterList": props.column.filterList,
+      "customTemplate": props.column.customFilterTemplate
+    }, null)]), props.column.sortable && createVNode(Sort, {
+      "modelValue": directionRef.value,
+      "onUpdate:modelValue": ($event) => directionRef.value = $event
+    }, null)]);
+  }
+});
+var TableBody = defineComponent$1({
+  name: "DTableBody",
+  setup() {
+    const table2 = inject(TABLE_TOKEN);
+    const {
+      _data: data,
+      _columns: columns,
+      _checkList: checkList,
+      isFixedLeft
+    } = table2.store.states;
+    const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
+    const tdAttrs = computed(() => isFixedLeft.value ? {
+      class: "devui-sticky-cell left",
+      style: "left:0;"
+    } : null);
+    const renderCheckbox = (index2) => table2.props.checkable ? createVNode("td", tdAttrs.value, [createVNode(Checkbox, {
+      "modelValue": checkList.value[index2],
+      "onUpdate:modelValue": ($event) => checkList.value[index2] = $event
+    }, null)]) : null;
+    return () => createVNode("tbody", {
       "class": "devui-tbody"
-    }, [rowColumns.map((row2, rowIndex) => {
+    }, [data.value.map((row2, rowIndex) => {
       return createVNode("tr", {
-        "key": rowIndex
-      }, [row2.columns.map((column, index2) => {
-        return createVNode("td", {
-          "key": index2
-        }, [column.renderCell({
-          row: row2,
-          column,
-          $index: index2
-        })]);
-      })]);
+        "key": rowIndex,
+        "class": {
+          "hover-enabled": hoverEnabled.value
+        }
+      }, [renderCheckbox(rowIndex), columns.value.map((column, index2) => createVNode(TD, {
+        "column": column,
+        "index": index2,
+        "row": row2
+      }, null))]);
     })]);
   }
 });
+const TD = defineComponent$1({
+  props: {
+    column: {
+      type: Object
+    },
+    row: {
+      type: Object
+    },
+    index: {
+      type: Number
+    }
+  },
+  setup(props) {
+    const column = toRef(props, "column");
+    const {
+      stickyCell,
+      offsetStyle
+    } = useFixedColumn(column);
+    return () => createVNode("td", {
+      "class": stickyCell.value,
+      "style": offsetStyle.value
+    }, [column.value.renderCell(props.row, props.index)]);
+  }
+});
 var table = "";
 var Table = defineComponent$1({
   name: "DTable",
   props: TableProps,
-  setup(props) {
+  setup(props, ctx2) {
     const table2 = getCurrentInstance();
-    const store = createStore(props);
+    const store = createStore(toRef(props, "data"));
     table2.store = store;
+    provide(TABLE_TOKEN, table2);
     const {
-      classes
-    } = useTable(props);
-    provide("table", table2);
-    return {
       classes,
-      store
-    };
-  },
-  render() {
-    const {
-      classes,
-      data,
-      store,
-      $slots
-    } = this;
-    return createVNode("div", {
-      "class": "devui-table-wrapper"
-    }, [$slots.default(), createVNode("table", {
-      "class": classes,
-      "cellpadding": "0",
-      "cellspacing": "0"
-    }, [createVNode(ColGroup, null, null), createVNode(TableHeader, {
-      "store": store
-    }, null), !!data.length && createVNode(TableBody, {
-      "store": store
-    }, null)]), !data.length && createVNode("div", {
+      style: style2
+    } = useTable(props);
+    const isEmpty2 = computed(() => props.data.length === 0);
+    const fixHeaderCompo = computed(() => {
+      return createVNode("div", {
+        "class": "devui-table-view"
+      }, [createVNode("div", {
+        "style": "overflow: hidden scroll;"
+      }, [createVNode("table", {
+        "class": classes.value,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), createVNode(TableHeader, null, null)])]), createVNode("div", {
+        "class": "scroll-view"
+      }, [createVNode("table", {
+        "class": classes.value,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), !isEmpty2.value && createVNode(TableBody, {
+        "style": "flex: 1"
+      }, null)])])]);
+    });
+    const normalHeaderCompo = computed(() => {
+      return createVNode("table", {
+        "class": classes.value,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), createVNode(TableHeader, {
+        "style": "position: relative"
+      }, null), !isEmpty2.value && createVNode(TableBody, null, null)]);
+    });
+    ctx2.expose({
+      getCheckedRows() {
+        return store.getCheckedRows();
+      }
+    });
+    return () => withDirectives(createVNode("div", {
+      "class": "devui-table-wrapper",
+      "style": style2.value
+    }, [ctx2.slots.default(), props.fixHeader ? fixHeaderCompo.value : normalHeaderCompo.value, isEmpty2.value && createVNode("div", {
       "class": "devui-table-empty"
-    }, [createTextVNode("No Data")])]);
+    }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
   }
 });
 const TableColumnProps = {
@@ -21215,6 +21850,36 @@ const TableColumnProps = {
   },
   formatter: {
     type: Function
+  },
+  order: {
+    type: Number,
+    default: 0
+  },
+  sortable: {
+    type: Boolean,
+    default: false
+  },
+  compareFn: {
+    type: Function,
+    default: (field, a, b) => a[field] < b[field]
+  },
+  filterable: {
+    type: Boolean,
+    default: false
+  },
+  filterMultiple: {
+    type: Boolean,
+    default: false
+  },
+  filterList: {
+    type: Array,
+    default: []
+  },
+  fixedLeft: {
+    type: String
+  },
+  fixedRight: {
+    type: String
   }
 };
 function formatWidth(width) {
@@ -21226,59 +21891,84 @@ function formatWidth(width) {
 function formatMinWidth(minWidth) {
   return formatWidth(minWidth) || 80;
 }
-function useRender(props) {
-  const formatedWidth = ref(formatWidth(props.width));
-  const formatedMinWidth = ref(formatMinWidth(props.minWidth));
-  const setColumnWidth = (column) => {
-    column.width = formatedWidth.value;
-    column.minWidth = formatedMinWidth.value;
+function createColumn(props, templates) {
+  const {
+    field,
+    header: header2,
+    sortable,
+    width,
+    minWidth,
+    formatter,
+    compareFn,
+    filterable,
+    filterList,
+    filterMultiple,
+    order,
+    fixedLeft,
+    fixedRight
+  } = props;
+  const column = reactive({});
+  watch([field, header2, order], ([field2, header22, order2]) => {
+    column.field = field2;
+    column.header = header22;
+    column.order = order2;
+  }, { immediate: true });
+  watch([sortable, compareFn], ([sortable2, compareFn2]) => {
+    column.sortable = sortable2;
+    column.compareFn = compareFn2;
+  });
+  watch([
+    filterable,
+    filterList,
+    filterMultiple
+  ], ([filterable2, filterList2, filterMultiple2]) => {
+    column.filterable = filterable2;
+    column.filterMultiple = filterMultiple2;
+    column.filterList = filterList2;
+  }, { immediate: true });
+  watch([fixedLeft, fixedRight], ([left, right]) => {
+    column.fixedLeft = left;
+    column.fixedRight = right;
+  }, { immediate: true });
+  watch([width, minWidth], ([width2, minWidth2]) => {
+    column.width = formatWidth(width2);
+    column.minWidth = formatMinWidth(minWidth2);
     column.realWidth = column.width || column.minWidth;
-    return column;
-  };
-  const setColumnRender = (column) => {
-    column.renderHeader = () => {
-      return defaultRenderHeader(column);
-    };
-    column.renderCell = (data) => {
-      return defaultRenderCell(data);
-    };
-  };
-  return { setColumnWidth, setColumnRender };
+  });
+  onBeforeMount(() => {
+    column.renderHeader = defaultRenderHeader;
+    column.renderCell = defaultRenderCell;
+    column.formatter = formatter.value;
+    column.customFilterTemplate = templates.customFilterTemplate;
+    column.subColumns = templates.subColumns;
+  });
+  return column;
 }
-function defaultRenderHeader(column) {
-  return column.header;
+function defaultRenderHeader() {
+  return h("span", { class: "title" }, this.header);
 }
-function defaultRenderCell({
-  row: row2,
-  column,
-  $index
-}) {
-  var _a;
-  const value = row2[column.field];
-  if (column.formatter) {
-    return column.formatter(row2, column, value, $index);
+function defaultRenderCell(rowData, index2) {
+  var _a, _b;
+  const value = rowData[this.field];
+  if (this.formatter) {
+    return this.formatter(rowData, value, index2);
   }
-  return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
+  return (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
 }
 var Column = defineComponent$1({
   name: "DColumn",
   props: TableColumnProps,
-  setup(props) {
-    const column = {
-      field: props.field,
-      header: props.header
-    };
-    const parent2 = inject("table");
-    const {
-      setColumnWidth,
-      setColumnRender
-    } = useRender(props);
-    onBeforeMount(() => {
-      setColumnWidth(column);
-      setColumnRender(column);
-    });
+  setup(props, ctx2) {
+    const column = createColumn(toRefs(props), ctx2.slots);
+    const parent2 = inject(TABLE_TOKEN);
     onMounted(() => {
       parent2.store.insertColumn(column);
+      watch(() => column.order, () => {
+        parent2.store.sortColumn();
+      });
+    });
+    onBeforeUnmount(() => {
+      parent2.store.removeColumn(column);
     });
   },
   render() {
@@ -21498,30 +22188,86 @@ const tagProps = {
   color: {
     type: String,
     default: ""
+  },
+  titleContent: {
+    type: String,
+    default: ""
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  deletable: {
+    type: Boolean,
+    default: false
   }
 };
-function useStyle(props) {
+function useClass(props) {
+  return computed(() => {
+    const { type: type4, color } = props;
+    return `devui-tag devui-tag-${type4 || (color ? "colorful" : "") || "default"}`;
+  });
+}
+function useColor(props) {
   return computed(() => {
-    const { type: type4 } = props;
-    return `devui-tag devui-tag-${type4 || "default"}`;
+    const { color, type: type4 } = props;
+    const typeMap = {
+      primary: "#5e7ce0",
+      success: "#50d4ab",
+      warning: "#fac20a",
+      danger: "#f66f6a"
+    };
+    const colorMap = {
+      "blue-w98": "#3383ff",
+      "aqua-w98": "#39afcc",
+      "olivine-w98": "#2fa898",
+      "green-w98": "#4eb15e",
+      "yellow-w98": "#b08d1a",
+      "orange-w98": "#d47f35",
+      "red-w98": "#f66f6a",
+      "pink-w98": "#f3689a",
+      "purple-w98": "#a97af8"
+    };
+    if (!color && type4)
+      return typeMap[type4];
+    const themeColor = colorMap[color] || color;
+    return themeColor;
   });
 }
 var tag = "";
 var Tag = defineComponent$1({
   name: "DTag",
   props: tagProps,
-  emits: [],
+  emits: ["click"],
   setup(props, {
-    slots
+    slots,
+    emit
   }) {
-    const tagClass = useStyle(props);
+    const {
+      type: type4,
+      color,
+      checked,
+      titleContent
+    } = toRefs(props);
+    const tagClass = useClass(props);
+    const themeColor = useColor(props);
+    const tagTitle = titleContent.value || "";
+    const Click = () => {
+      emit("click");
+    };
     return () => {
       var _a;
       return createVNode("div", {
-        "class": "devui-tag"
+        "class": "devui-tag",
+        "onClick": Click
       }, [createVNode("span", {
         "class": tagClass.value,
-        "style": "display: block;"
+        "style": {
+          display: "block",
+          color: checked.value ? "#fff" : themeColor.value,
+          backgroundColor: checked.value ? themeColor.value : type4.value ? "" : !color.value ? "" : "#fff"
+        },
+        "title": tagTitle
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
     };
   }
@@ -23568,7 +24314,7 @@ const EventListener = {
   }
 };
 var tooltip = "";
-var Tooltip = defineComponent$1({
+var DTooltip = defineComponent$1({
   name: "DTooltip",
   props: tooltipProps,
   setup(props, ctx2) {
@@ -23685,15 +24431,15 @@ var Tooltip = defineComponent$1({
     };
   }
 });
-Tooltip.install = function(app) {
-  app.component(Tooltip.name, Tooltip);
+DTooltip.install = function(app) {
+  app.component(DTooltip.name, DTooltip);
 };
 var TooltipInstall = {
   title: "Tooltip\u63D0\u793A",
   category: "\u53CD\u9988",
   status: "50%",
   install(app) {
-    app.use(Tooltip);
+    app.use(DTooltip);
   }
 };
 const transferBaseProps = {
@@ -23725,10 +24471,14 @@ const transferBaseProps = {
     type: Boolean,
     default: () => false
   },
-  query: {
+  filter: {
     type: String,
     default: () => ""
   },
+  height: {
+    type: String,
+    default: () => "320px"
+  },
   alltargetState: {
     type: Boolean,
     default: () => false
@@ -23745,6 +24495,14 @@ const transferBaseProps = {
     type: Number,
     default: () => 0
   },
+  showTooltip: {
+    type: Boolean,
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  },
   scopedSlots: {
     type: Object
   },
@@ -23778,7 +24536,7 @@ const initState = (props, type4) => {
     allChecked: false,
     disabled: false,
     checkedNum: initModel.model.length,
-    query: "",
+    keyword: "",
     checkedValues: initModel.model,
     filterData: initModel.data
   };
@@ -23797,19 +24555,36 @@ var DTransferBase = defineComponent$1({
   components: {
     DSearch,
     DCheckboxGroup,
-    DCheckbox: Checkbox
+    DCheckbox: Checkbox,
+    DTooltip
   },
   props: transferBaseProps,
   setup(props, ctx2) {
     const modelValues = computed(() => props.checkedValues);
-    const searchQuery = computed(() => props.query);
+    const searchQuery = computed(() => props.filter);
     const baseClass = TransferBaseClass(props);
     const updateSearchQuery = (val) => ctx2.emit("changeQuery", val);
+    const renderCheckbox = (props2, key, showTooltip = false, tooltipPosition = "top") => {
+      const checkbox2 = createVNode(Checkbox, {
+        "class": "devui-transfer-panel-body-list-item",
+        "label": props2.key,
+        "value": props2.value,
+        "disabled": props2.disabled,
+        "key": key
+      }, null);
+      return !showTooltip ? checkbox2 : createVNode(DTooltip, {
+        "position": tooltipPosition,
+        "content": props2.key
+      }, _isSlot$1(checkbox2) ? checkbox2 : {
+        default: () => [checkbox2]
+      });
+    };
     return {
       baseClass,
       searchQuery,
       modelValues,
-      updateSearchQuery
+      updateSearchQuery,
+      renderCheckbox
     };
   },
   render() {
@@ -23824,7 +24599,11 @@ var DTransferBase = defineComponent$1({
       updateSearchQuery,
       search: search2,
       searchQuery,
-      modelValues
+      modelValues,
+      height,
+      showTooltip,
+      tooltipPosition,
+      renderCheckbox
     } = this;
     return createVNode("div", {
       "class": baseClass
@@ -23849,19 +24628,13 @@ var DTransferBase = defineComponent$1({
     }, null)]), createVNode("div", {
       "class": "devui-transfer-panel-body-list",
       "style": {
-        height: `calc(100% - 40px - ${search2 ? 42 : 0}px)`
+        height
       }
     }, [sourceOption.length ? createVNode(DCheckboxGroup, {
       "modelValue": modelValues,
       "onChange": (values) => this.$emit("updateCheckeds", values)
     }, _isSlot$1(_slot = sourceOption.map((item2, idx) => {
-      return createVNode(Checkbox, {
-        "class": "devui-transfer-panel-body-list-item",
-        "label": item2.key,
-        "value": item2.value,
-        "disabled": item2.disabled,
-        "key": idx
-      }, null);
+      return renderCheckbox(item2, idx, showTooltip, tooltipPosition);
     })) ? _slot : {
       default: () => [_slot]
     }) : createVNode("div", {
@@ -23946,30 +24719,52 @@ const transferProps = {
   },
   height: {
     type: String,
-    default: "320px"
+    default: () => "320px"
   },
   isSearch: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   isSourceDroppable: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   isTargetDroppable: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: () => false
   },
-  showOptionTitle: {
+  showTooltip: {
     type: Boolean,
-    default: false
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  },
+  beforeTransfer: {
+    type: Function
   },
   slots: {
     type: Object
+  },
+  searching: {
+    type: Function
+  },
+  transferToSource: {
+    type: Function
+  },
+  transferToTarget: {
+    type: Function
+  },
+  transferring: {
+    type: Function
+  },
+  afterTransfer: {
+    type: Function
   }
 };
 const headerSlot = (ctx2, name) => {
@@ -23991,10 +24786,16 @@ var Transfer = defineComponent$1({
   },
   props: transferProps,
   setup(props, ctx2) {
-    const leftOptions = reactive(initState(props, "source"));
-    const rightOptions = reactive(initState(props, "target"));
+    let leftOptions = reactive(initState(props, "source"));
+    let rightOptions = reactive(initState(props, "target"));
     const origin = ref(null);
-    watch(() => leftOptions.query, (nVal) => {
+    watch(() => props.sourceOption, () => {
+      leftOptions = reactive(initState(props, "source"));
+    });
+    watch(() => props.targetOption, () => {
+      rightOptions = reactive(initState(props, "target"));
+    });
+    watch(() => leftOptions.keyword, (nVal) => {
       searchFilterData(leftOptions);
     });
     watch(() => leftOptions.checkedValues, (values) => {
@@ -24003,7 +24804,7 @@ var Transfer = defineComponent$1({
     }, {
       deep: true
     });
-    watch(() => rightOptions.query, (nVal) => {
+    watch(() => rightOptions.keyword, (nVal) => {
       searchFilterData(rightOptions);
     });
     watch(() => rightOptions.checkedValues, (values) => {
@@ -24019,19 +24820,35 @@ var Transfer = defineComponent$1({
         source.allChecked = value.length === source.data.filter((item2) => !item2.disabled).length ? true : false;
       }
     };
-    const updateFilterData = (source, target) => {
-      const newData = [];
-      source.data = source.data.filter((item2) => {
-        const hasInclues = source.checkedValues.includes(item2.value);
-        hasInclues && newData.push(item2);
-        return !hasInclues;
-      });
-      target.data = target.data.concat(newData);
+    const updateFilterData = async (source, target, direction) => {
+      if (isFunction2("beforeTransfer")) {
+        const res = await props.beforeTransfer.call(null, source, target);
+        if (typeof res === "boolean" && res === false) {
+          return;
+        }
+      }
+      const hasToSource = isFunction2("transferToSource");
+      const hasToTarget = isFunction2("transferToTarget");
+      const hasTransfering = isFunction2("transferring");
+      if (hasToSource || hasToTarget) {
+        direction === "right" && props.transferToSource.call(null, source, target);
+        direction === "left" && props.transferToTarget.call(null, source, target);
+      } else {
+        source.data = source.data.filter((item2) => {
+          const hasInclues = source.checkedValues.includes(item2.value);
+          hasInclues && target.data.push(item2);
+          return !hasInclues;
+        });
+      }
+      if (hasTransfering) {
+        props.transferring.call(null, target);
+      }
       source.checkedValues = [];
       target.disabled = !target.disabled;
       searchFilterData(source, target);
       searchFilterData(target, source);
       setOrigin("click");
+      isFunction2("afterTransfer") && props.afterTransfer.call(null, target);
     };
     const changeAllSource = (source, value) => {
       if (source.filterData.every((item2) => item2.disabled))
@@ -24053,7 +24870,7 @@ var Transfer = defineComponent$1({
       setOrigin("change");
     };
     const searchFilterData = (source, target) => {
-      source.filterData = source.data.filter((item2) => item2.key.indexOf(source.query) !== -1);
+      source.filterData = source.data.filter((item2) => item2.key.indexOf(source.keyword) !== -1);
       if (target) {
         target.allChecked = false;
       }
@@ -24061,25 +24878,35 @@ var Transfer = defineComponent$1({
     const setOrigin = (value) => {
       origin.value = value;
     };
+    const changeQueryHandle = (source, direction, value) => {
+      if ((props == null ? void 0 : props.searching) && typeof props.searching === "function") {
+        props.searching.call(null, direction, value, source);
+        return;
+      }
+      source.keyword = value;
+    };
+    const isFunction2 = (type4) => {
+      return props[type4] && typeof props[type4] === "function";
+    };
     return () => {
       return createVNode("div", {
         "class": "devui-transfer"
       }, [createVNode(DTransferBase, {
-        "style": {
-          height: props.height
-        },
         "sourceOption": leftOptions.filterData,
         "title": props.titles[0],
         "type": "source",
         "search": props.isSearch,
         "allChecked": leftOptions.allChecked,
         "checkedNum": leftOptions.checkedNum,
-        "query": leftOptions.query,
+        "filter": leftOptions.keyword,
+        "height": props.height,
         "checkedValues": leftOptions.checkedValues,
         "allCount": leftOptions.data.length,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition,
         "onChangeAllSource": (value) => changeAllSource(leftOptions, value),
         "onUpdateCheckeds": updateLeftCheckeds,
-        "onChangeQuery": (value) => leftOptions.query = value
+        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value)
       }, {
         header: headerSlot(ctx2, "left"),
         body: bodySlot(ctx2, "left")
@@ -24088,29 +24915,29 @@ var Transfer = defineComponent$1({
         "sourceDisabled": rightOptions.checkedNum > 0 ? false : true,
         "targetDisabled": leftOptions.checkedNum > 0 ? false : true,
         "onUpdateSourceData": () => {
-          updateFilterData(rightOptions, leftOptions);
+          updateFilterData(rightOptions, leftOptions, "left");
         },
         "onUpdateTargetData": () => {
-          updateFilterData(leftOptions, rightOptions);
+          updateFilterData(leftOptions, rightOptions, "right");
         }
       }, {
         operation: opeartionSlot(ctx2)
       }), createVNode(DTransferBase, {
-        "style": {
-          height: props.height
-        },
         "sourceOption": rightOptions.filterData,
         "title": props.titles[1],
         "type": "target",
         "search": props.isSearch,
         "allChecked": rightOptions.allChecked,
         "checkedNum": rightOptions.checkedNum,
-        "query": rightOptions.query,
+        "filter": rightOptions.keyword,
+        "height": props.height,
         "checkedValues": rightOptions.checkedValues,
         "allCount": rightOptions.data.length,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition,
         "onChangeAllSource": (value) => changeAllSource(rightOptions, value),
         "onUpdateCheckeds": updateRightCheckeds,
-        "onChangeQuery": (value) => rightOptions.query = value
+        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value)
       }, {
         header: headerSlot(ctx2, "right"),
         body: bodySlot(ctx2, "right")
@@ -25940,7 +26767,7 @@ Upload.install = function(app) {
 var UploadInstall = {
   title: "Upload \u4E0A\u4F20",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "80%",
+  status: "\u5DF2\u5B8C\u6210",
   install(app) {
     app.use(Upload);
   }
@@ -25958,6 +26785,7 @@ const installs = [
   CarouselInstall,
   CascaderInstall,
   CheckboxInstall,
+  CommentInstall,
   DatePickerInstall,
   DragdropInstall,
   DrawerInstall,
@@ -25970,6 +26798,7 @@ const installs = [
   IconInstall,
   ImagePreviewInstall,
   InputInstall,
+  InputIconInstall,
   InputNumberInstall,
   LayoutInstall,
   LoadingInstall,
@@ -26014,4 +26843,4 @@ var vueDevui = {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, Column, Content, DatePicker, DraggableDirective, Drawer, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, MultiUpload, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, Splitter, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };
+export { Accordion, Alert, Anchor, Aside, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, Column, Comment, Content, DatePicker, DraggableDirective, Drawer, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, MultiUpload, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, Splitter, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };