vue-devui 1.0.0-rc.5 → 1.0.0-rc.6

package/table/index.es.js

@@ -21,7 +21,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { computed, ref, watch, unref, defineComponent, inject, createVNode, toRefs, onMounted, onUnmounted, Teleport, Transition, renderSlot, isVNode, nextTick, mergeProps, Fragment, withDirectives, vShow, toRef, provide, getCurrentInstance, shallowRef, h, render, createTextVNode, resolveDirective, reactive, onBeforeMount, onBeforeUnmount } from "vue";
+import { computed, ref, watch, unref, defineComponent, inject, createVNode, toRefs, onMounted, onUnmounted, Teleport, Transition, renderSlot, isVNode, nextTick, mergeProps, Fragment, withDirectives, vShow, h, render, resolveDirective, toRef, provide, createTextVNode, getCurrentInstance, reactive, onBeforeMount, onBeforeUnmount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const TableProps = {
@@ -217,15 +217,15 @@ const createSelection = (dataSource, _data) => {
   watch(dataSource, (value) => {
     _checkList.value = new Array(value.length).fill(false);
   }, { deep: true, immediate: true });
-  watch(_checkList, (list) => {
-    if (list.length === 0) {
+  watch(_checkList, (list2) => {
+    if (list2.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]);
+    for (let i = 0; i < list2.length; i++) {
+      allTrue && (allTrue = list2[i]);
+      allFalse && (allFalse = !list2[i]);
     }
     _checkAllRecord.value = allTrue;
     _halfChecked.value = !(allFalse || allTrue);
@@ -253,23 +253,6 @@ const createSorter = (dataSource, _data) => {
   const thList = [];
   return { sortData, thList };
 };
-const createFilter = (dataSource, _data) => {
-  const fieldSet = /* @__PURE__ */ new Set();
-  const filterData = (field, results) => {
-    fieldSet.add(field);
-    const fields = [...fieldSet];
-    _data.value = dataSource.value.filter((item) => {
-      return fields.reduce((prev, fieldKey) => {
-        return prev && results.indexOf(item[fieldKey]) !== -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);
@@ -284,7 +267,6 @@ function createStore(dataSource) {
   const { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns } = createColumnGenerator();
   const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
   const { sortData, thList } = createSorter(dataSource, _data);
-  const { filterData, resetFilterData } = createFilter(dataSource, _data);
   const { isFixedLeft } = createFixedLogic(_columns);
   return {
     states: {
@@ -302,9 +284,7 @@ function createStore(dataSource) {
     removeColumn,
     updateColumns,
     getCheckedRows,
-    sortData,
-    filterData,
-    resetFilterData
+    sortData
   };
 }
 var ColGroup = defineComponent({
@@ -394,6 +374,16 @@ var Sort = defineComponent({
     }, null)])])])]);
   }
 });
+const filterProps = {
+  filterList: {
+    type: Array,
+    default: () => []
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+};
 const dropdownProps = {
   visible: {
     type: Boolean,
@@ -484,7 +474,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
     setTimeout(() => {
       subscriptions.push(subscribeEvent(document, "click", (e) => {
         const dropdownValues = [...dropdownMap.values()];
-        if (!isOpen.value || closeScope.value === "none" || dropdownEl.contains(e.target) && closeScope.value === "blank" || dropdownValues.some((item) => {
+        if (!isOpen.value || closeScope.value === "none" || (dropdownEl == null ? void 0 : dropdownEl.contains(e.target)) && closeScope.value === "blank" || dropdownValues.some((item) => {
           var _a;
           return (_a = item.toggleEl) == null ? void 0 : _a.contains(e.target);
         }) && dropdownValues.some((item) => {
@@ -600,7 +590,7 @@ function useOverlayProps(props, currentPosition, isOpen) {
   return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
 }
 var baseOverlay = "";
-function _isSlot(s) {
+function _isSlot$1(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const CommonOverlay = defineComponent({
@@ -612,7 +602,7 @@ const CommonOverlay = defineComponent({
       }, {
         default: () => [createVNode(Transition, {
           "name": "devui-overlay-fade"
-        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+        }, _isSlot$1(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
           default: () => [_slot]
         })]
       });
@@ -911,6 +901,7 @@ var Dropdown = defineComponent({
       align,
       offset: offset2,
       destroyOnHide,
+      shiftOffset,
       showAnimation
     } = toRefs(props);
     const origin = ref();
@@ -964,6 +955,7 @@ var Dropdown = defineComponent({
             "position": position.value,
             "align": align.value,
             "offset": offset2.value,
+            "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
             "onPositionChange": handlePositionChange,
             "class": classes.value,
             "style": styles.value
@@ -1078,207 +1070,553 @@ defineComponent({
     });
   }
 });
-var checkbox = "";
-const commonProps = {
+const iconProps = {
   name: {
     type: String,
-    default: void 0
-  },
-  halfchecked: {
-    type: Boolean,
-    default: false
-  },
-  isShowTitle: {
-    type: Boolean,
-    default: true
+    default: "",
+    required: true
   },
-  title: {
-    type: String
+  size: {
+    type: String,
+    default: "inherit"
   },
   color: {
     type: String,
-    default: void 0
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
-  },
-  disabled: {
-    type: Boolean,
-    default: false
+    default: "inherit"
   },
-  beforeChange: {
-    type: Function,
-    default: void 0
+  classPrefix: {
+    type: String,
+    default: "icon"
   }
 };
-const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
-  halfchecked: {
-    type: Boolean,
-    default: false
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  setup(props) {
+    const {
+      name,
+      size,
+      color,
+      classPrefix
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color.value
+        }
+      }, null);
+    };
+  }
+});
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const loadingProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
   },
-  checked: {
+  zIndex: Number,
+  isFull: {
     type: Boolean,
     default: false
-  },
-  value: {
-    type: String
-  },
-  label: {
-    type: String,
-    default: void 0
-  },
-  title: {
-    type: String,
-    default: void 0
-  },
-  "onUpdate:checked": {
-    type: Function,
-    default: void 0
-  },
-  onChange: {
-    type: Function,
-    default: void 0
-  },
-  modelValue: {
-    type: Boolean
-  },
-  "onUpdate:modelValue": {
-    type: Function
   }
-});
-const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
-  modelValue: {
-    type: Array,
-    required: true
-  },
-  direction: {
-    type: String,
-    default: "column"
-  },
-  itemWidth: {
-    type: Number,
-    default: void 0
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  onChange: {
-    type: Function,
-    default: void 0
-  },
-  "onUpdate:modelValue": {
-    type: Function,
-    default: void 0
+};
+class LoadingOptions {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
   }
-});
-const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
-var Checkbox = defineComponent({
-  name: "DCheckbox",
-  props: checkboxProps,
-  emits: ["change", "update:checked", "update:modelValue"],
-  setup(props, ctx) {
-    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
-    const isChecked = computed(() => props.checked || props.modelValue);
-    const mergedDisabled = computed(() => {
-      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
-    });
-    const mergedChecked = computed(() => {
-      var _a, _b;
-      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
-    });
-    const mergedIsShowTitle = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
-    });
-    const mergedShowAnimation = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
-    });
-    const mergedColor = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
-    });
-    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
-    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
-    const canChange = (checked, val) => {
-      var _a;
-      if (mergedDisabled.value) {
-        return Promise.resolve(false);
-      }
-      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
-      if (beforeChange) {
-        const res = beforeChange(checked, val);
-        if (typeof res === "boolean") {
-          return Promise.resolve(res);
-        }
-        return res;
-      }
-      return Promise.resolve(true);
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: loadingProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
     };
-    const toggle = () => {
-      const current = !isChecked.value;
-      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
-      ctx.emit("update:checked", current);
-      ctx.emit("update:modelValue", current);
-      ctx.emit("change", current);
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
     };
-    const handleClick = () => {
-      canChange(!isChecked.value, props.label).then((res) => res && toggle());
+    const close = () => {
+      isShow.value = false;
     };
     return {
-      itemWidth,
-      direction,
-      mergedColor,
-      mergedDisabled,
-      mergedIsShowTitle,
-      mergedChecked,
-      mergedShowAnimation,
-      handleClick
+      style,
+      isShow,
+      open,
+      close
     };
   },
   render() {
     var _a;
     const {
-      itemWidth,
-      direction,
-      mergedChecked,
-      mergedDisabled,
-      mergedIsShowTitle,
-      mergedShowAnimation,
-      halfchecked,
-      title,
-      label,
-      handleClick,
-      name,
-      value,
-      mergedColor,
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
       $slots
     } = this;
-    const wrapperCls = {
-      "devui-checkbox-column-margin": direction === "column",
-      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
-    };
-    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
-    const checkboxCls = {
-      "devui-checkbox": true,
-      active: mergedChecked,
-      halfchecked,
-      disabled: mergedDisabled,
-      unchecked: !mergedChecked
-    };
-    const labelTitle = mergedIsShowTitle ? title || label : "";
-    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
-    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
-    const spanCls = {
-      "devui-checkbox-material": true,
-      "custom-color": mergedColor,
-      "devui-checkbox-no-label": !label && !$slots.default,
-      "devui-no-animation": !mergedShowAnimation,
-      "devui-checkbox-default-background": !halfchecked
-    };
-    const polygonCls = {
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(component, props, children = null) {
+  const vnode = h(component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = /* @__PURE__ */ new WeakSet();
+const isEmpty = (val) => {
+  if (!val) {
+    return true;
+  }
+  if (Array.isArray(val)) {
+    return val.length === 0;
+  }
+  if (val instanceof Set || val instanceof Map) {
+    return val.size === 0;
+  }
+  if (val instanceof Promise) {
+    return false;
+  }
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  var _a, _b, _c;
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error") {
+      return;
+    }
+    (_c = (_b = (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.proxy) == null ? void 0 : _b.open) == null ? void 0 : _c.call(_b);
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  var _a;
+  const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el)) {
+      return;
+    }
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
+const buttonProps = {
+  variant: {
+    type: String,
+    default: "outline"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  color: {
+    type: String
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+function useButton(props, ctx) {
+  const hasContent = computed(() => ctx.slots.default);
+  const colorMap = {
+    solid: "primary",
+    outline: "secondary",
+    text: "secondary"
+  };
+  const defaultColor = colorMap[props.variant];
+  const classes = computed(() => ({
+    "devui-btn": true,
+    [`devui-btn-${props.variant}`]: true,
+    [`devui-btn-${props.variant}-${props.color || defaultColor}`]: true,
+    [`devui-btn-${props.size}`]: true,
+    "devui-btn-icon-wrap": props.icon,
+    "devui-btn-icon": props.icon && !hasContent.value && props.variant !== "solid"
+  }));
+  const iconClass = computed(() => {
+    if (!props.icon) {
+      return;
+    }
+    const origin = "devui-icon-fix icon";
+    if (hasContent.value) {
+      return `${origin} clear-right-5`;
+    } else {
+      return origin;
+    }
+  });
+  return { classes, iconClass };
+}
+var button = "";
+var Button = defineComponent({
+  name: "DButton",
+  directives: {
+    dLoading: loadingDirective
+  },
+  props: buttonProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      icon,
+      disabled,
+      loading: loading2
+    } = toRefs(props);
+    const {
+      classes,
+      iconClass
+    } = useButton(props, ctx);
+    const onClick = (e) => {
+      if (loading2.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b;
+      return withDirectives(createVNode("button", {
+        "class": classes.value,
+        "disabled": disabled.value,
+        "onClick": onClick
+      }, [icon.value && createVNode(Icon, {
+        "name": icon.value,
+        "size": "var(--devui-font-size, 12px)",
+        "color": "",
+        "class": iconClass.value
+      }, null), createVNode("span", {
+        "class": "button-content"
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("dLoading"), loading2.value]]);
+    };
+  }
+});
+var checkbox = "";
+const commonProps = {
+  name: {
+    type: String,
+    default: void 0
+  },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  isShowTitle: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  beforeChange: {
+    type: Function,
+    default: void 0
+  }
+};
+const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  },
+  label: {
+    type: String,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  "onUpdate:checked": {
+    type: Function,
+    default: void 0
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+});
+const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  direction: {
+    type: String,
+    default: "column"
+  },
+  itemWidth: {
+    type: Number,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  }
+});
+const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+var Checkbox = defineComponent({
+  name: "DCheckbox",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    const isChecked = computed(() => props.checked || props.modelValue);
+    const mergedDisabled = computed(() => {
+      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
+    });
+    const mergedChecked = computed(() => {
+      var _a, _b;
+      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
+    });
+    const mergedIsShowTitle = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
+    });
+    const mergedShowAnimation = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
+    });
+    const mergedColor = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
+    });
+    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
+    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
+    const canChange = (checked, val) => {
+      var _a;
+      if (mergedDisabled.value) {
+        return Promise.resolve(false);
+      }
+      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
+      if (beforeChange) {
+        const res = beforeChange(checked, val);
+        if (typeof res === "boolean") {
+          return Promise.resolve(res);
+        }
+        return res;
+      }
+      return Promise.resolve(true);
+    };
+    const toggle = () => {
+      const current = !isChecked.value;
+      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
+      ctx.emit("update:checked", current);
+      ctx.emit("update:modelValue", current);
+      ctx.emit("change", current);
+    };
+    const handleClick = () => {
+      canChange(!isChecked.value, props.label).then((res) => res && toggle());
+    };
+    return {
+      itemWidth,
+      direction,
+      mergedColor,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedChecked,
+      mergedShowAnimation,
+      handleClick
+    };
+  },
+  render() {
+    var _a;
+    const {
+      itemWidth,
+      direction,
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedShowAnimation,
+      halfchecked,
+      title,
+      label,
+      handleClick,
+      name,
+      value,
+      mergedColor,
+      $slots
+    } = this;
+    const wrapperCls = {
+      "devui-checkbox-column-margin": direction === "column",
+      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+    };
+    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+    const checkboxCls = {
+      "devui-checkbox": true,
+      active: mergedChecked,
+      halfchecked,
+      disabled: mergedDisabled,
+      unchecked: !mergedChecked
+    };
+    const labelTitle = mergedIsShowTitle ? title || label : "";
+    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
+    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
+    const spanCls = {
+      "devui-checkbox-material": true,
+      "custom-color": mergedColor,
+      "devui-checkbox-no-label": !label && !$slots.default,
+      "devui-no-animation": !mergedShowAnimation,
+      "devui-checkbox-default-background": !halfchecked
+    };
+    const polygonCls = {
       "devui-tick": true,
       "devui-no-animation": !mergedShowAnimation
     };
@@ -1419,99 +1757,242 @@ defineComponent({
     }, [children])]);
   }
 });
-var filter = "";
-const Filter = defineComponent({
+function useFilterRender(ctx) {
+  const showMenu = ref(false);
+  const filterMenuRef = ref(null);
+  const filterIconRef = ref(null);
+  const singleVal = ref(null);
+  const multipleVal = ref(null);
+  const handleIconClick = () => {
+    showMenu.value = !showMenu.value;
+  };
+  const handleConfirm = (val) => {
+    showMenu.value = false;
+    multipleVal.value = val;
+    ctx.emit("filter", val);
+  };
+  const handleSelect = (val) => {
+    showMenu.value = false;
+    singleVal.value = val;
+    ctx.emit("filter", val);
+  };
+  const iconClasses = computed(() => {
+    var _a;
+    return {
+      "filter-icon": true,
+      "filter-icon-active": Boolean(singleVal.value || ((_a = multipleVal.value) == null ? void 0 : _a.length))
+    };
+  });
+  onClickOutside(filterMenuRef, () => {
+    showMenu.value = false;
+  }, {
+    ignore: [filterIconRef]
+  });
+  return { showMenu, filterMenuRef, filterIconRef, iconClasses, handleIconClick, handleConfirm, handleSelect };
+}
+function useFilterMultiple(filterList, ctx) {
+  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].checked = val;
+      }
+    }
+  });
+  const _halfChecked = ref(false);
+  filterList == null ? void 0 : filterList.forEach((item) => {
+    _checkList.value.push(__spreadValues({ checked: false }, item));
+  });
+  watch(_checkList, (list2) => {
+    if (!list2.length) {
+      return;
+    }
+    let allTrue = true;
+    let allFalse = true;
+    for (let i = 0; i < list2.length; i++) {
+      allTrue && (allTrue = Boolean(list2[i].checked));
+      allFalse && (allFalse = Boolean(!list2[i].checked));
+    }
+    _checkAllRecord.value = allTrue;
+    _halfChecked.value = !(allFalse || allTrue);
+  }, { immediate: true, deep: true });
+  const getCheckedItems = () => {
+    return _checkList.value.filter((item) => item.checked);
+  };
+  const handleConfirm = () => {
+    ctx.emit("confirm", getCheckedItems());
+  };
+  return { _checkList, _checkAll, _halfChecked, handleConfirm };
+}
+function useFilterSingle(ctx) {
+  const selectedItem = ref(null);
+  const handleSelect = (val) => {
+    selectedItem.value = val;
+    ctx.emit("select", val);
+  };
+  return { selectedItem, handleSelect };
+}
+var MultipleFilter = defineComponent({
+  props: {
+    filterList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["confirm"],
+  setup(props, ctx) {
+    const {
+      _checkList,
+      _checkAll,
+      _halfChecked,
+      handleConfirm
+    } = useFilterMultiple(props.filterList, ctx);
+    return () => createVNode(Fragment, null, [createVNode("div", {
+      "class": "filter-all-check"
+    }, [createVNode("div", {
+      "class": "filter-item"
+    }, [createVNode(Checkbox, {
+      "modelValue": _checkAll.value,
+      "onUpdate:modelValue": ($event) => _checkAll.value = $event,
+      "halfchecked": _halfChecked.value,
+      "label": "\u5168\u9009"
+    }, null)])]), createVNode("div", {
+      "class": "filter-multiple-menu"
+    }, [_checkList.value.map((item) => createVNode("div", {
+      "class": "filter-item"
+    }, [createVNode(Checkbox, {
+      "modelValue": item.checked,
+      "onUpdate:modelValue": ($event) => item.checked = $event,
+      "label": item.name
+    }, null)]))]), createVNode("div", {
+      "class": "filter-operation"
+    }, [createVNode(Button, {
+      "variant": "text",
+      "onClick": handleConfirm
+    }, {
+      default: () => [createTextVNode("\u786E\u5B9A")]
+    })])]);
+  }
+});
+var list = "";
+var List = defineComponent({
+  name: "DList",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-list"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var listItem = "";
+var ListItem = defineComponent({
+  name: "DListItem",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-list-item"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var SingleFilter = defineComponent({
   props: {
-    modelValue: {
-      type: Array,
-      default: []
-    },
-    "onUpdate:modelValue": {
-      type: Function
-    },
-    customTemplate: {
-      type: Function
-    },
     filterList: {
       type: Array,
-      required: true
-    },
-    filterMultiple: {
-      type: Boolean,
-      default: true
+      default: () => []
     }
   },
-  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((item) => item === config.value);
-      if (value && !contained) {
-        update == null ? void 0 : update([...checkedList, config.value]);
-      } else if (!value && contained) {
-        update == null ? void 0 : update(checkedList.filter((item) => config.value !== item));
-      }
-    };
-    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((item) => item === config.value);
-      return () => createVNode("ul", {
-        "class": "devui-dropdown-menu data-table-column-filter-content",
-        "style": "padding:10px"
-      }, [props.filterList.map((item, index2) => {
-        return createVNode("li", {
-          "style": index2 > 0 ? "margin-top:10px" : ""
-        }, [props.filterMultiple ? createVNode(Checkbox, {
-          "modelValue": isContained(item),
-          "onUpdate:modelValue": (value) => onUpdateChecked(item, value)
-        }, {
-          default: () => [item.name]
-        }) : createVNode("span", {
-          "onClick": () => updateSingleChecked(item)
-        }, [item.name])]);
+  emits: ["select"],
+  setup(props, ctx) {
+    const {
+      selectedItem,
+      handleSelect
+    } = useFilterSingle(ctx);
+    return () => {
+      let _slot;
+      return createVNode(Fragment, null, [createVNode(List, {
+        "class": "filter-single-menu"
+      }, _isSlot(_slot = props.filterList.map((item) => createVNode(ListItem, {
+        "class": ["filter-item", {
+          "filter-item-active": selectedItem.value === item
+        }],
+        "onClick": () => {
+          handleSelect(item);
+        }
+      }, {
+        default: () => [item.name]
+      }))) ? _slot : {
+        default: () => [_slot]
       })]);
-    });
-    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"
+    };
+  }
+});
+var filter = "";
+var Filter = defineComponent({
+  props: filterProps,
+  emits: ["filter"],
+  setup(props, ctx) {
+    const {
+      showMenu,
+      filterMenuRef,
+      filterIconRef,
+      iconClasses,
+      handleIconClick,
+      handleConfirm,
+      handleSelect
+    } = useFilterRender(ctx);
+    return () => createVNode(Dropdown, {
+      "visible": showMenu.value,
+      "trigger": "manually",
+      "close-scope": "none",
+      "destroy-on-hide": false,
+      "style": "padding-bottom: 4px;"
     }, {
-      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()];
-      }
-    })]);
+      default: () => createVNode("i", {
+        "ref": filterIconRef,
+        "class": iconClasses.value,
+        "onClick": handleIconClick
+      }, [createVNode("svg", {
+        "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("g", null, [createVNode("polygon", {
+        "points": "10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"
+      }, null)])])])]),
+      menu: () => createVNode("div", {
+        "ref": filterMenuRef,
+        "class": "filter-wrapper"
+      }, [props.multiple ? createVNode(MultipleFilter, {
+        "filterList": props.filterList,
+        "onConfirm": handleConfirm
+      }, null) : createVNode(SingleFilter, {
+        "filterList": props.filterList,
+        "onSelect": handleSelect
+      }, null)])
+    });
   }
 });
-const useSort = (column) => {
+function useSort(column) {
   const table2 = inject(TABLE_TOKEN);
   const store = table2.store;
   const direction = ref(column.value.sortDirection);
@@ -1543,14 +2024,18 @@ const useSort = (column) => {
     direction.value = "";
   };
   return { direction, sortClass, handleSort, clearSortOrder };
-};
-const useFilter = (store, column) => {
-  const filteredRef = shallowRef();
-  watch(filteredRef, (results) => {
-    store.filterData(column.value.field, results);
-  });
-  return filteredRef;
-};
+}
+function useFilter(column) {
+  const filter2 = ref(null);
+  const filterClass = computed(() => ({
+    "filter-active": Boolean(filter2.value || Array.isArray(filter2.value) && filter2.value.length)
+  }));
+  const handleFilter = (val) => {
+    filter2.value = val;
+    column.value.ctx.emit("filter-change", val);
+  };
+  return { filterClass, handleFilter };
+}
 var TH = defineComponent({
   name: "DTableHeaderTh",
   props: {
@@ -1573,7 +2058,10 @@ var TH = defineComponent({
       handleSort,
       clearSortOrder
     } = useSort(column);
-    const filteredRef = useFilter(store, column);
+    const {
+      filterClass,
+      handleFilter
+    } = useFilter(column);
     const {
       stickyClass,
       stickyStyle
@@ -1584,15 +2072,14 @@ var TH = defineComponent({
     return () => {
       var _a, _b;
       return createVNode("th", {
-        "class": [stickyClass.value, sortClass.value],
+        "class": [stickyClass.value, sortClass.value, filterClass.value],
         "style": stickyStyle.value
       }, [createVNode("div", {
         "class": "header-container"
       }, [(_b = (_a = column.value).renderHeader) == null ? void 0 : _b.call(_a, column.value, store), column.value.filterable && createVNode(Filter, {
-        "modelValue": filteredRef.value,
-        "onUpdate:modelValue": ($event) => filteredRef.value = $event,
-        "filterList": props.column.filterList,
-        "customTemplate": props.column.customFilterTemplate
+        "filterList": column.value.filterList,
+        "multiple": column.value.filterMultiple,
+        "onFilter": handleFilter
       }, null), column.value.sortable && createVNode(Sort, {
         "sort-direction": direction.value,
         "onSort": handleSort
@@ -1855,210 +2342,6 @@ var NormalHeader = defineComponent({
     };
   }
 });
-class View {
-  constructor() {
-    __publicField(this, "top", "50%");
-    __publicField(this, "left", "50%");
-  }
-}
-const loadingProps = {
-  message: String,
-  backdrop: Boolean,
-  view: {
-    type: Object,
-    default: () => new View()
-  },
-  zIndex: Number,
-  isFull: {
-    type: Boolean,
-    default: false
-  }
-};
-class LoadingOptions {
-  constructor() {
-    __publicField(this, "target");
-    __publicField(this, "message");
-    __publicField(this, "loadingTemplateRef");
-    __publicField(this, "backdrop", true);
-    __publicField(this, "positionType", "relative");
-    __publicField(this, "view", new View());
-    __publicField(this, "zIndex");
-  }
-}
-var loading = "";
-var Loading = defineComponent({
-  name: "DLoading",
-  inheritAttrs: false,
-  props: loadingProps,
-  setup(props) {
-    const style = {
-      top: props.view.top,
-      left: props.view.left,
-      zIndex: props.zIndex
-    };
-    if (!props.message) {
-      style.background = "none";
-    }
-    const isShow = ref(false);
-    const open = () => {
-      isShow.value = true;
-    };
-    const close = () => {
-      isShow.value = false;
-    };
-    return {
-      style,
-      isShow,
-      open,
-      close
-    };
-  },
-  render() {
-    var _a;
-    const {
-      isShow,
-      isFull,
-      backdrop,
-      style,
-      message,
-      $slots
-    } = this;
-    return isShow && createVNode("div", {
-      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
-    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
-      "class": "devui-loading-wrapper"
-    }, [backdrop ? createVNode("div", {
-      "class": "devui-loading-mask"
-    }, null) : null, createVNode("div", {
-      "style": style,
-      "class": "devui-loading-area"
-    }, [createVNode("div", {
-      "class": "devui-busy-default-spinner"
-    }, [createVNode("div", {
-      "class": "devui-loading-bar1"
-    }, null), createVNode("div", {
-      "class": "devui-loading-bar2"
-    }, null), createVNode("div", {
-      "class": "devui-loading-bar3"
-    }, null), createVNode("div", {
-      "class": "devui-loading-bar4"
-    }, null)]), message ? createVNode("span", {
-      "class": "devui-loading-text"
-    }, [message]) : null])])]);
-  }
-});
-const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
-function createComponent(component, props, children = null) {
-  const vnode = h(component, __spreadValues({}, props), children);
-  const container = document.createElement("div");
-  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
-  render(vnode, container);
-  return vnode.component;
-}
-function unmountComponent(ComponnetInstance) {
-  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
-}
-const loadingConstructor = defineComponent(Loading);
-const cacheInstance = /* @__PURE__ */ new WeakSet();
-const isEmpty = (val) => {
-  if (!val) {
-    return true;
-  }
-  if (Array.isArray(val)) {
-    return val.length === 0;
-  }
-  if (val instanceof Set || val instanceof Map) {
-    return val.size === 0;
-  }
-  if (val instanceof Promise) {
-    return false;
-  }
-  if (typeof val === "object") {
-    try {
-      return Object.keys(val).length === 0;
-    } catch (e) {
-      return false;
-    }
-  }
-  return false;
-};
-const getType = (vari) => {
-  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
-};
-const isPromise = (value) => {
-  const type = getType(value);
-  switch (type) {
-    case "promise":
-      return [value];
-    case "array":
-      if (value.some((val) => getType(val) !== "promise")) {
-        console.error(new TypeError("Binding values should all be of type Promise"));
-        return "error";
-      }
-      return value;
-    default:
-      return false;
-  }
-};
-const unmount = (el) => {
-  cacheInstance.delete(el);
-  el.instance.proxy.close();
-  unmountComponent(el.instance);
-};
-const toggleLoading = (el, binding) => {
-  var _a, _b, _c;
-  if (binding.value) {
-    const vals = isPromise(binding.value);
-    if (vals === "error") {
-      return;
-    }
-    (_c = (_b = (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.proxy) == null ? void 0 : _b.open) == null ? void 0 : _c.call(_b);
-    el.appendChild(el.mask);
-    cacheInstance.add(el);
-    if (vals) {
-      Promise.all(vals).catch((err) => {
-        console.error(new Error("Promise handling errors"), err);
-      }).finally(() => {
-        unmount(el);
-      });
-    }
-  } else {
-    unmount(el);
-  }
-};
-const removeAttribute = (el) => {
-  el.removeAttribute("zindex");
-  el.removeAttribute("positiontype");
-  el.removeAttribute("backdrop");
-  el.removeAttribute("message");
-  el.removeAttribute("view");
-  el.removeAttribute("loadingtemplateref");
-};
-const handleProps = (el, vprops) => {
-  var _a;
-  const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
-  const loadingTemplateRef = props.loadingTemplateRef;
-  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
-  el.style.position = props.positionType;
-  el.options = props;
-  el.instance = loadingInstance;
-  el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
-};
-const loadingDirective = {
-  mounted: function(el, binding, vnode) {
-    handleProps(el, vnode.props);
-    removeAttribute(el);
-    !isEmpty(binding.value) && toggleLoading(el, binding);
-  },
-  updated: function(el, binding, vnode) {
-    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el)) {
-      return;
-    }
-    !cacheInstance.has(el) && handleProps(el, vnode.props);
-    removeAttribute(el);
-    toggleLoading(el, binding);
-  }
-};
 defineComponent(Loading);
 var table = "";
 let tableIdInit = 1;
@@ -2157,7 +2440,7 @@ const tableColumnProps = {
   },
   filterMultiple: {
     type: Boolean,
-    default: false
+    default: true
   },
   filterList: {
     type: Array,
@@ -2310,6 +2593,7 @@ let columnIdInit = 1;
 var Column = defineComponent({
   name: "DColumn",
   props: tableColumnProps,
+  emits: ["filter-change"],
   setup(props, ctx) {
     const instance = getCurrentInstance();
     const column = createColumn(toRefs(props), ctx.slots);
@@ -2322,6 +2606,7 @@ var Column = defineComponent({
     } = useRender();
     const parent = columnOrTableParent.value;
     columnId = `${parent.tableId || parent.columnId}_column_${columnIdInit++}`;
+    column.ctx = ctx;
     onBeforeMount(() => {
       isSubColumn.value = owner !== parent;
       column.id = columnId;