vue-devui 1.0.0-rc.4 → 1.0.0-rc.7

package/table/index.es.js

@@ -0,0 +1,2662 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, 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 = {
+  data: {
+    type: Array,
+    default: []
+  },
+  striped: {
+    type: Boolean,
+    default: false
+  },
+  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";
+    },
+    default: "sm"
+  },
+  rowHoveredHighlight: {
+    type: Boolean,
+    default: true
+  },
+  fixHeader: {
+    type: Boolean,
+    default: false
+  },
+  checkable: {
+    type: Boolean,
+    default: false
+  },
+  tableLayout: {
+    type: String,
+    default: "fixed",
+    validator(v) {
+      return v === "fixed" || v === "auto";
+    }
+  },
+  showLoading: {
+    type: Boolean,
+    default: false
+  },
+  headerBg: {
+    type: Boolean,
+    default: false
+  },
+  spanMethod: {
+    type: Function
+  },
+  borderType: {
+    type: String,
+    default: ""
+  }
+};
+const TABLE_TOKEN = Symbol();
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function useTable(props) {
+  const ns = useNamespace("table");
+  const classes = computed(() => ({
+    [ns.e("view")]: true,
+    [ns.m("striped")]: props.striped,
+    [ns.m("header-bg")]: props.headerBg,
+    [ns.m("layout-auto")]: props.tableLayout === "auto",
+    [ns.m(`${props.size}`)]: true,
+    [ns.m(`${props.borderType}`)]: Boolean(props.borderType)
+  }));
+  const style = computed(() => ({
+    maxHeight: props.maxHeight,
+    maxWidth: props.maxWidth,
+    height: props.tableHeight,
+    width: props.tableWidth
+  }));
+  return { classes, style };
+}
+const useFixedColumn = (column) => {
+  const ns = useNamespace("table");
+  const stickyClass = computed(() => ({
+    [ns.e("checkable-cell")]: column.value.type === "checkable",
+    [ns.m("sticky-cell")]: Boolean(column.value.fixedLeft) || Boolean(column.value.fixedRight)
+  }));
+  const stickyStyle = computed(() => ({
+    left: column.value.fixedLeft,
+    right: column.value.fixedRight
+  }));
+  return { stickyClass, stickyStyle };
+};
+function replaceColumn(array, column) {
+  return array.map((item) => {
+    var _a;
+    if (item.id === column.id) {
+      return column;
+    } else if ((_a = item.children) == null ? void 0 : _a.length) {
+      item.children = replaceColumn(item.children, column);
+    }
+    return item;
+  });
+}
+function doFlattenColumns(columns) {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push.apply(result, doFlattenColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+}
+const createColumnGenerator = () => {
+  const _columns = ref([]);
+  const flatColumns = ref([]);
+  const sortColumn = () => {
+    _columns.value.sort((a, b) => a.order - b.order);
+  };
+  const insertColumn = (column, parent) => {
+    const array = unref(_columns);
+    let newColumns = [];
+    if (!parent) {
+      array.push(column);
+      newColumns = array;
+    } else {
+      if (parent && !parent.children) {
+        parent.children = [];
+      }
+      parent.children.push(column);
+      newColumns = replaceColumn(array, parent);
+    }
+    sortColumn();
+    _columns.value = newColumns;
+  };
+  const removeColumn = (column) => {
+    const i = _columns.value.findIndex((v) => v === column);
+    if (i === -1) {
+      return;
+    }
+    _columns.value.splice(i, 1);
+  };
+  const updateColumns = () => {
+    flatColumns.value = [].concat(doFlattenColumns(_columns.value));
+  };
+  return { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns };
+};
+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, (list2) => {
+    if (list2.length === 0) {
+      return;
+    }
+    let allTrue = true;
+    let allFalse = true;
+    for (let i = 0; i < list2.length; i++) {
+      allTrue && (allTrue = list2[i]);
+      allFalse && (allFalse = !list2[i]);
+    }
+    _checkAllRecord.value = allTrue;
+    _halfChecked.value = !(allFalse || allTrue);
+  }, { immediate: true, deep: true });
+  const getCheckedRows = () => {
+    return _data.value.filter((_, index2) => _checkList.value[index2]);
+  };
+  return {
+    _checkList,
+    _checkAll,
+    _halfChecked,
+    getCheckedRows
+  };
+};
+const createSorter = (dataSource, _data) => {
+  const sortData = (direction, sortMethod) => {
+    if (direction === "ASC") {
+      _data.value = _data.value.sort((a, b) => sortMethod ? sortMethod(a, b) ? 1 : -1 : 0);
+    } else if (direction === "DESC") {
+      _data.value = _data.value.sort((a, b) => sortMethod ? sortMethod(a, b) ? -1 : 1 : 0);
+    } else {
+      _data.value = [...dataSource.value];
+    }
+  };
+  const thList = [];
+  return { sortData, thList };
+};
+const createFixedLogic = (columns) => {
+  const isFixedLeft = computed(() => {
+    return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
+  });
+  return { isFixedLeft };
+};
+function createStore(dataSource) {
+  const _data = ref([]);
+  watch(dataSource, (value) => {
+    _data.value = [...value];
+  }, { deep: true, immediate: true });
+  const { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns } = createColumnGenerator();
+  const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
+  const { sortData, thList } = createSorter(dataSource, _data);
+  const { isFixedLeft } = createFixedLogic(_columns);
+  return {
+    states: {
+      _data,
+      _columns,
+      flatColumns,
+      _checkList,
+      _checkAll,
+      _halfChecked,
+      isFixedLeft,
+      thList
+    },
+    insertColumn,
+    sortColumn,
+    removeColumn,
+    updateColumns,
+    getCheckedRows,
+    sortData
+  };
+}
+var ColGroup = defineComponent({
+  name: "DColGroup",
+  setup() {
+    const parent = inject(TABLE_TOKEN);
+    const columns = parent == null ? void 0 : parent.store.states._columns;
+    return () => (parent == null ? void 0 : parent.props.fixHeader) ? createVNode("colgroup", null, [columns == null ? void 0 : columns.value.map((column, index2) => {
+      return createVNode("col", {
+        "key": index2,
+        "width": column.realWidth
+      }, null);
+    })]) : null;
+  }
+});
+const sortProps = {
+  sortDirection: {
+    type: String,
+    default: ""
+  }
+};
+var sort = "";
+var Sort = defineComponent({
+  props: sortProps,
+  emits: ["sort"],
+  setup(props, ctx) {
+    const directionMap = {
+      ASC: "DESC",
+      DESC: "",
+      default: "ASC"
+    };
+    const changeDirection = () => {
+      ctx.emit("sort", directionMap[props.sortDirection || "default"]);
+    };
+    return () => createVNode("span", {
+      "onClick": changeDirection,
+      "class": "sort-clickable"
+    }, [createVNode("i", {
+      "class": ["datatable-svg", {
+        "sort-icon-default": !props.sortDirection,
+        "sort-icon-asc": props.sortDirection === "ASC",
+        "sort-icon-desc": props.sortDirection === "DESC"
+      }]
+    }, [createVNode("svg", {
+      "width": "16px",
+      "height": "16px",
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg"
+    }, [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 filterProps = {
+  filterList: {
+    type: Array,
+    default: () => []
+  },
+  multiple: {
+    type: Boolean,
+    default: true
+  }
+};
+const dropdownProps = {
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  closeScope: {
+    type: String,
+    default: "all"
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  offset: {
+    type: [Number, Object],
+    default: 4
+  },
+  shiftOffset: {
+    type: Number
+  },
+  closeOnMouseLeaveMenu: {
+    type: Boolean,
+    default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
+  },
+  destroyOnHide: {
+    type: Boolean,
+    default: true
+  }
+};
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+const dropdownMap = /* @__PURE__ */ new Map();
+function subscribeEvent(dom, type, callback) {
+  dom == null ? void 0 : dom.addEventListener(type, callback);
+  return () => {
+    dom == null ? void 0 : dom.removeEventListener(type, callback);
+  };
+}
+const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
+  let overlayEnter = false;
+  let originEnter = false;
+  const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
+  const toggle = (status) => {
+    isOpen.value = status;
+    emit("toggle", isOpen.value);
+  };
+  const handleLeave = async (elementType, closeAll) => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
+      return;
+    }
+    if (closeAll) {
+      [...dropdownMap.values()].reverse().forEach((item) => {
+        setTimeout(() => {
+          var _a;
+          (_a = item.toggle) == null ? void 0 : _a.call(item);
+        }, 0);
+      });
+    }
+    toggle(false);
+  };
+  watch([trigger, origin, dropdownRef], ([triggerVal, originVal, dropdownEl], ov, onInvalidate) => {
+    const originEl = getElement(originVal);
+    const subscriptions = [];
+    setTimeout(() => {
+      subscriptions.push(subscribeEvent(document, "click", (e) => {
+        const dropdownValues = [...dropdownMap.values()];
+        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) => {
+          var _a;
+          return (_a = item.menuEl) == null ? void 0 : _a.contains(e.target);
+        })) {
+          return;
+        }
+        [...dropdownMap.values()].reverse().forEach((item) => {
+          setTimeout(() => {
+            var _a, _b;
+            if (!((_a = item.toggleEl) == null ? void 0 : _a.contains(e.target))) {
+              (_b = item.toggle) == null ? void 0 : _b.call(item);
+            }
+          }, 0);
+        });
+        overlayEnter = false;
+      }));
+    }, 0);
+    if (triggerVal === "click") {
+      subscriptions.push(subscribeEvent(originEl, "click", () => toggle(!isOpen.value)), subscribeEvent(dropdownEl, "mouseleave", (e) => {
+        var _a;
+        if (closeOnMouseLeaveMenu.value && !((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget))) {
+          handleLeave("dropdown", true);
+        }
+      }));
+    } else if (triggerVal === "hover") {
+      subscriptions.push(subscribeEvent(originEl, "mouseenter", () => {
+        originEnter = true;
+        toggle(true);
+      }), subscribeEvent(originEl, "mouseleave", () => {
+        originEnter = false;
+        handleLeave("origin");
+      }), subscribeEvent(dropdownEl, "mouseenter", () => {
+        overlayEnter = true;
+        isOpen.value = true;
+      }), subscribeEvent(dropdownEl, "mouseleave", (e) => {
+        var _a;
+        overlayEnter = false;
+        if (e.relatedTarget && ((originEl == null ? void 0 : originEl.contains(e.relatedTarget)) || ((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget)))) {
+          return;
+        }
+        handleLeave("dropdown", true);
+      }));
+    }
+    onInvalidate(() => subscriptions.forEach((v) => v()));
+  });
+};
+function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emit) {
+  const calcPopDirection = (dropdownEl) => {
+    const elementHeight = dropdownEl.offsetHeight;
+    const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
+    const isBottomEnough = bottomDistance >= elementHeight;
+    if (!isBottomEnough) {
+      popDirection.value = "top";
+    } else {
+      popDirection.value = "bottom";
+    }
+  };
+  watch(visible, (newVal, oldVal) => {
+    if (oldVal === void 0) {
+      return;
+    }
+    isOpen.value = newVal;
+    emit("toggle", isOpen.value);
+  }, { immediate: true });
+  watch([isOpen, dropdownRef], ([isOpenVal, dropdownEl]) => {
+    var _a;
+    if (isOpenVal) {
+      dropdownMap.set(id, __spreadProps(__spreadValues({}, dropdownMap.get(id)), {
+        menuEl: dropdownEl,
+        toggle: () => {
+          isOpen.value = false;
+          emit("toggle", isOpen.value);
+        }
+      }));
+      for (const value of dropdownMap.values()) {
+        if ((_a = value.menuEl) == null ? void 0 : _a.contains(origin.value)) {
+          value.child = dropdownEl;
+        }
+      }
+    }
+    if (dropdownEl) {
+      calcPopDirection(dropdownEl);
+    }
+  });
+  onMounted(() => {
+    dropdownMap.set(id, { toggleEl: origin.value });
+  });
+  onUnmounted(() => {
+    dropdownMap.delete(id);
+  });
+}
+function useOverlayProps(props, currentPosition, isOpen) {
+  const { showAnimation, overlayClass, destroyOnHide } = toRefs(props);
+  const overlayModelValue = ref(false);
+  const overlayShowValue = ref(false);
+  const styles = computed(() => ({
+    transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
+  }));
+  const classes = computed(() => ({
+    "fade-in-bottom": showAnimation.value && isOpen.value && currentPosition.value === "bottom",
+    "fade-in-top": showAnimation.value && isOpen.value && currentPosition.value === "top",
+    [`${overlayClass.value}`]: true
+  }));
+  const handlePositionChange = (pos) => {
+    currentPosition.value = pos.includes("top") || pos.includes("end") ? "top" : "bottom";
+  };
+  watch(isOpen, (isOpenVal) => {
+    overlayModelValue.value = destroyOnHide.value ? isOpenVal : true;
+    overlayShowValue.value = isOpenVal;
+  });
+  return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
+}
+var baseOverlay = "";
+function _isSlot$1(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot$1(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const overlayEmits = ["update:visible", "backdropClick"];
+function useOverlayLogic(props, ctx) {
+  const backgroundClass = computed(() => {
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body2 = document.body;
+    const originOverflow = body2.style.overflow;
+    const originPosition = body2.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body2.getBoundingClientRect().y;
+        if (visible) {
+          body2.style.overflowY = "scroll";
+          body2.style.position = visible ? "fixed" : "";
+          body2.style.top = `${top}px`;
+        } else {
+          body2.style.overflowY = originOverflow;
+          body2.style.position = originPosition;
+          body2.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
+    });
+  });
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
+}
+var fixedOverlay = "";
+defineComponent({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [props.visible && createVNode("div", {
+        "class": backgroundClass.value,
+        "style": props.backgroundStyle,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "class": overlayClass.value,
+        "style": props.overlayStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])])]
+    });
+  }
+});
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  shiftOffset: {
+    type: Number
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
+  }
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  let originParent = null;
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
+      nextTick(updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
+}
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const {
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": "devui-flexible-overlay"
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": "devui-flexible-overlay-arrow"
+      }, null)]);
+    };
+  }
+});
+var dropdown = "";
+let dropdownId = 1;
+var Dropdown = defineComponent({
+  name: "DDropdown",
+  inheritAttrs: false,
+  props: dropdownProps,
+  emits: ["toggle"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const {
+      visible,
+      position,
+      align,
+      offset: offset2,
+      destroyOnHide,
+      shiftOffset,
+      showAnimation
+    } = toRefs(props);
+    const origin = ref();
+    const dropdownRef = ref();
+    const overlayRef = ref();
+    const id = `dropdown_${dropdownId++}`;
+    const isOpen = ref(false);
+    const currentPosition = ref("bottom");
+    useDropdownEvent({
+      id,
+      isOpen,
+      origin,
+      dropdownRef,
+      props,
+      emit
+    });
+    useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
+    const {
+      overlayModelValue,
+      overlayShowValue,
+      styles,
+      classes,
+      handlePositionChange
+    } = useOverlayProps(props, currentPosition, isOpen);
+    watch(overlayShowValue, (overlayShowValueVal) => {
+      nextTick(() => {
+        if (!destroyOnHide.value && overlayShowValueVal) {
+          overlayRef.value.updatePosition();
+        }
+      });
+    });
+    expose({
+      updatePosition: () => overlayRef.value.updatePosition()
+    });
+    return () => {
+      var _a;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "ref": origin,
+        "class": "devui-dropdown-toggle"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
+        }, {
+          default: () => [withDirectives(createVNode(FlexibleOverlay, {
+            "modelValue": overlayModelValue.value,
+            "onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
+            "ref": overlayRef,
+            "origin": origin.value,
+            "position": position.value,
+            "align": align.value,
+            "offset": offset2.value,
+            "shiftOffset": shiftOffset == null ? void 0 : shiftOffset.value,
+            "onPositionChange": handlePositionChange,
+            "class": classes.value,
+            "style": styles.value
+          }, {
+            default: () => {
+              var _a2;
+              return [createVNode("div", mergeProps({
+                "ref": dropdownRef,
+                "class": "devui-dropdown-menu-wrap"
+              }, attrs), [(_a2 = slots.menu) == null ? void 0 : _a2.call(slots)])];
+            }
+          }), [[vShow, overlayShowValue.value]])]
+        })]
+      })]);
+    };
+  }
+});
+const dropdownMenuProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  offset: {
+    type: [Number, Object],
+    default: 4
+  },
+  clickOutside: {
+    type: Function,
+    default: () => true
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
+  }
+};
+defineComponent({
+  name: "DDropdownMenu",
+  inheritAttrs: false,
+  props: dropdownMenuProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const {
+      modelValue,
+      origin,
+      position,
+      align,
+      offset: offset2,
+      clickOutside,
+      showAnimation,
+      overlayClass
+    } = toRefs(props);
+    const dropdownMenuRef = ref(null);
+    onClickOutside(dropdownMenuRef, (value) => {
+      var _a, _b;
+      if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
+        emit("update:modelValue", false);
+      }
+    });
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
+    }));
+    return () => createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
+      }, {
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": modelValue.value,
+          "onUpdate:modelValue": ($event) => modelValue.value = $event,
+          "origin": origin == null ? void 0 : origin.value,
+          "position": position.value,
+          "align": align.value,
+          "offset": offset2.value,
+          "onPositionChange": handlePositionChange,
+          "class": overlayClass.value,
+          "style": styles.value
+        }, {
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "ref": dropdownMenuRef,
+              "class": "devui-dropdown-menu-wrap"
+            }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
+          }
+        })]
+      })]
+    });
+  }
+});
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
+var Icon = defineComponent({
+  name: "DIcon",
+  props: 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()
+  },
+  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);
+  }
+};
+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",
+    "devui-btn-is-loading": props.loading
+  }));
+  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
+    };
+    const stopPropagation = ($event) => $event.stopPropagation();
+    const inputProps = {
+      indeterminate: halfchecked
+    };
+    return createVNode("div", {
+      "class": wrapperCls,
+      "style": wrapperStyle
+    }, [createVNode("div", {
+      "class": checkboxCls
+    }, [createVNode("label", {
+      "title": labelTitle,
+      "onClick": handleClick
+    }, [createVNode("input", mergeProps({
+      "name": name || value,
+      "class": "devui-checkbox-input",
+      "type": "checkbox"
+    }, inputProps, {
+      "checked": mergedChecked,
+      "disabled": mergedDisabled,
+      "onClick": stopPropagation,
+      "onChange": stopPropagation
+    }), null), createVNode("span", {
+      "style": spanStyle,
+      "class": spanCls
+    }, [createVNode("span", {
+      "class": "devui-checkbox-halfchecked-bg"
+    }, null), createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "class": "devui-checkbox-tick"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("polygon", {
+      "fill-rule": "nonzero",
+      "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+      "class": polygonCls
+    }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
+  }
+});
+var checkboxGroup = "";
+defineComponent({
+  name: "DCheckboxGroup",
+  props: checkboxGroupProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, ctx) {
+    const valList = toRef(props, "modelValue");
+    const defaultOpt = {
+      checked: false,
+      isShowTitle: true,
+      halfchecked: false,
+      showAnimation: true,
+      disabled: false
+    };
+    const toggleGroupVal = (val) => {
+      let index2 = -1;
+      if (typeof valList.value[0] === "string") {
+        index2 = valList.value.findIndex((item) => item === val);
+      } else if (typeof valList.value[0] === "object") {
+        index2 = valList.value.findIndex((item) => item.value === val);
+      }
+      if (index2 === -1) {
+        if (typeof props.options[0] === "object") {
+          const newOne = props.options.find((item) => item.value === val);
+          const res2 = [...valList.value, newOne];
+          ctx.emit("update:modelValue", res2);
+          ctx.emit("change", res2);
+          return;
+        }
+        const res = [...valList.value, val];
+        ctx.emit("update:modelValue", res);
+        ctx.emit("change", res);
+        return;
+      }
+      valList.value.splice(index2, 1);
+      ctx.emit("update:modelValue", valList.value);
+      ctx.emit("change", valList.value);
+    };
+    const isItemChecked = (itemVal) => {
+      if (typeof valList.value[0] === "string") {
+        return valList.value.includes(itemVal);
+      } else if (typeof valList.value[0] === "object") {
+        return valList.value.some((item) => item.value === itemVal);
+      }
+    };
+    provide(checkboxGroupInjectionKey, {
+      disabled: toRef(props, "disabled"),
+      isShowTitle: toRef(props, "isShowTitle"),
+      color: toRef(props, "color"),
+      showAnimation: toRef(props, "showAnimation"),
+      beforeChange: props.beforeChange,
+      isItemChecked,
+      toggleGroupVal,
+      itemWidth: toRef(props, "itemWidth"),
+      direction: toRef(props, "direction")
+    });
+    return {
+      defaultOpt
+    };
+  },
+  render() {
+    var _a;
+    const {
+      direction,
+      $slots,
+      defaultOpt,
+      options
+    } = this;
+    let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
+    if ((options == null ? void 0 : options.length) > 0) {
+      children = options.map((opt) => {
+        let mergedOpt = null;
+        if (typeof opt === "string") {
+          mergedOpt = Object.assign({}, defaultOpt, {
+            label: opt,
+            value: opt
+          });
+        } else if (typeof opt === "object") {
+          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+            label: opt.name
+          }));
+        }
+        return createVNode(Checkbox, mergedOpt, null);
+      });
+    }
+    return createVNode("div", {
+      "class": "devui-checkbox-group"
+    }, [createVNode("div", {
+      "class": {
+        "devui-checkbox-list-inline": direction === "row"
+      }
+    }, [children])]);
+  }
+});
+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: {
+    filterList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  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]
+      })]);
+    };
+  }
+});
+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: () => 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)])
+    });
+  }
+});
+function useSort(column) {
+  const table2 = inject(TABLE_TOKEN);
+  const store = table2.store;
+  const direction = ref(column.value.sortDirection);
+  const sortClass = computed(() => ({
+    "sort-active": Boolean(direction.value)
+  }));
+  const thInstance = getCurrentInstance();
+  thInstance && store.states.thList.push(thInstance);
+  onMounted(() => {
+    var _a;
+    column.value.sortable && column.value.sortDirection && ((_a = store.sortData) == null ? void 0 : _a.call(store, direction.value, column.value.sortMethod));
+  });
+  const execClearSortOrder = () => {
+    store.states.thList.forEach((th) => {
+      var _a, _b;
+      if (th !== thInstance) {
+        (_b = (_a = th.exposed) == null ? void 0 : _a.clearSortOrder) == null ? void 0 : _b.call(_a);
+      }
+    });
+  };
+  const handleSort = (val) => {
+    var _a;
+    direction.value = val;
+    execClearSortOrder();
+    (_a = store.sortData) == null ? void 0 : _a.call(store, direction.value, column.value.sortMethod);
+    table2.emit("sort-change", { field: column.value.field, direction: direction.value });
+  };
+  const clearSortOrder = () => {
+    direction.value = "";
+  };
+  return { direction, sortClass, handleSort, clearSortOrder };
+}
+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: {
+    column: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const table2 = inject(TABLE_TOKEN);
+    const store = table2.store;
+    const {
+      column
+    } = toRefs(props);
+    const {
+      direction,
+      sortClass,
+      handleSort,
+      clearSortOrder
+    } = useSort(column);
+    const {
+      filterClass,
+      handleFilter
+    } = useFilter(column);
+    const {
+      stickyClass,
+      stickyStyle
+    } = useFixedColumn(column);
+    expose({
+      clearSortOrder
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("th", {
+        "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, {
+        "filterList": column.value.filterList,
+        "multiple": column.value.filterMultiple,
+        "onFilter": handleFilter
+      }, null), column.value.sortable && createVNode(Sort, {
+        "sort-direction": direction.value,
+        "onSort": handleSort
+      }, null)])]);
+    };
+  }
+});
+function getAllColumns(columns) {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push(column);
+      result.push.apply(result, getAllColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+}
+function convertToRows(originColumns) {
+  let maxLevel = 1;
+  const traverse = (column, parent) => {
+    if (parent) {
+      column.level = parent.level + 1;
+      if (maxLevel < column.level) {
+        maxLevel = column.level;
+      }
+    }
+    if (column.children) {
+      let colSpan = 0;
+      column.children.forEach((subColumn) => {
+        traverse(subColumn, column);
+        colSpan += subColumn.colSpan;
+      });
+      column.colSpan = colSpan;
+    } else {
+      column.colSpan = 1;
+    }
+  };
+  originColumns.forEach((column) => {
+    column.level = 1;
+    traverse(column, void 0);
+  });
+  const rows = [];
+  for (let i = 0; i < maxLevel; i++) {
+    rows.push([]);
+  }
+  const allColumns = getAllColumns(originColumns);
+  allColumns.forEach((column) => {
+    if (!column.children) {
+      column.rowSpan = maxLevel - column.level + 1;
+    } else {
+      column.rowSpan = 1;
+      column.children.forEach((col) => col.isSubColumn = true);
+    }
+    rows[column.level - 1].push(column);
+  });
+  return rows;
+}
+function useHeader() {
+  const table2 = inject(TABLE_TOKEN);
+  const headerRows = computed(() => convertToRows(table2 == null ? void 0 : table2.store.states._columns.value));
+  return { headerRows };
+}
+var header = "";
+var body = "";
+var TableHeader = defineComponent({
+  name: "DTableHeader",
+  setup() {
+    const ns = useNamespace("table");
+    const {
+      headerRows
+    } = useHeader();
+    return () => createVNode("thead", {
+      "class": ns.e("thead")
+    }, [headerRows.value.map((subColumns) => createVNode("tr", null, [subColumns.map((column, columnIndex) => createVNode(TH, {
+      "key": columnIndex,
+      "column": column,
+      "colspan": column.colSpan,
+      "rowspan": column.rowSpan
+    }, null))]))]);
+  }
+});
+var TD = defineComponent({
+  name: "DTableBodyTd",
+  props: {
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const table2 = inject(TABLE_TOKEN);
+    const column = toRef(props, "column");
+    const {
+      stickyClass,
+      stickyStyle
+    } = useFixedColumn(column);
+    return () => {
+      var _a, _b;
+      return createVNode("td", {
+        "class": stickyClass.value,
+        "style": stickyStyle.value
+      }, [(_b = (_a = column.value).renderCell) == null ? void 0 : _b.call(_a, props.row, column.value, table2.store, props.index)]);
+    };
+  }
+});
+function useMergeCell() {
+  const table2 = inject(TABLE_TOKEN);
+  const { _data: data, _columns: columns } = table2.store.states;
+  const getSpan = (row, column, rowIndex, columnIndex) => {
+    const fn = table2 == null ? void 0 : table2.props.spanMethod;
+    let rowspan = 1;
+    let colspan = 1;
+    if (typeof fn === "function") {
+      const result = fn({ row, column, rowIndex, columnIndex });
+      if (Array.isArray(result)) {
+        rowspan = result[0];
+        colspan = result[1];
+      } else if (typeof result === "object") {
+        rowspan = result.rowspan;
+        colspan = result.colspan;
+      }
+    }
+    return { rowspan, colspan };
+  };
+  const tableSpans = computed(() => {
+    const result = {};
+    if (table2 == null ? void 0 : table2.props.spanMethod) {
+      data.value.forEach((row, rowIndex) => {
+        columns.value.forEach((column, columnIndex) => {
+          const { rowspan, colspan } = getSpan(row, column, rowIndex, columnIndex);
+          if (rowspan > 1 || colspan > 1) {
+            result[`${rowIndex}-${columnIndex}`] = [rowspan, colspan];
+          }
+        });
+      });
+    }
+    return result;
+  });
+  const removeCells = computed(() => {
+    const result = [];
+    for (const indexKey of Object.keys(tableSpans.value)) {
+      const indexArray = indexKey.split("-").map((item) => Number(item));
+      const spans = tableSpans.value[indexKey];
+      for (let i = 1; i < spans[0]; i++) {
+        result.push(`${indexArray[0] + i}-${indexArray[1]}`);
+        for (let j = 1; j < spans[1]; j++) {
+          result.push(`${indexArray[0] + i}-${indexArray[1] + j}`);
+        }
+      }
+      for (let i = 1; i < spans[1]; i++) {
+        result.push(`${indexArray[0]}-${indexArray[1] + i}`);
+      }
+    }
+    return result;
+  });
+  return { tableSpans, removeCells };
+}
+var TableBody = defineComponent({
+  name: "DTableBody",
+  setup() {
+    const table2 = inject(TABLE_TOKEN);
+    const {
+      _data: data,
+      flatColumns
+    } = table2.store.states;
+    const ns = useNamespace("table");
+    const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
+    const {
+      tableSpans,
+      removeCells
+    } = useMergeCell();
+    return () => createVNode("tbody", {
+      "class": ns.e("tbody")
+    }, [data.value.map((row, rowIndex) => {
+      return createVNode("tr", {
+        "key": rowIndex,
+        "class": {
+          "hover-enabled": hoverEnabled.value
+        }
+      }, [flatColumns.value.map((column, columnIndex) => {
+        var _a;
+        const cellId = `${rowIndex}-${columnIndex}`;
+        const [rowspan, colspan] = (_a = tableSpans.value[cellId]) != null ? _a : [1, 1];
+        if (removeCells.value.includes(cellId)) {
+          return null;
+        }
+        return createVNode(TD, {
+          "column": column,
+          "index": rowIndex,
+          "row": row,
+          "rowspan": rowspan,
+          "colspan": colspan
+        }, null);
+      })]);
+    })]);
+  }
+});
+var FixHeader = defineComponent({
+  props: {
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    isEmpty: {
+      type: Boolean
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("table");
+    return () => {
+      return createVNode("div", {
+        "class": ns.e("fix-header")
+      }, [createVNode("div", {
+        "style": "overflow:hidden scroll;"
+      }, [createVNode("table", {
+        "class": props.classes,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), createVNode(TableHeader, null, null)])]), createVNode("div", {
+        "class": ns.e("scroll-view")
+      }, [createVNode("table", {
+        "class": props.classes,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), !props.isEmpty && createVNode(TableBody, {
+        "style": "flex: 1"
+      }, null)])])]);
+    };
+  }
+});
+var NormalHeader = defineComponent({
+  props: {
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    isEmpty: {
+      type: Boolean
+    }
+  },
+  setup(props) {
+    return () => {
+      return createVNode("table", {
+        "class": props.classes,
+        "cellpadding": "0",
+        "cellspacing": "0"
+      }, [createVNode(ColGroup, null, null), createVNode(TableHeader, {
+        "style": "position:relative"
+      }, null), !props.isEmpty && createVNode(TableBody, null, null)]);
+    };
+  }
+});
+defineComponent(Loading);
+var table = "";
+let tableIdInit = 1;
+var Table = defineComponent({
+  name: "DTable",
+  directives: {
+    dLoading: loadingDirective
+  },
+  props: TableProps,
+  emits: ["sort-change"],
+  setup(props, ctx) {
+    const table2 = getCurrentInstance();
+    const store = createStore(toRef(props, "data"));
+    const tableId = `devui-table_${tableIdInit++}`;
+    table2.tableId = tableId;
+    table2.store = store;
+    provide(TABLE_TOKEN, table2);
+    const {
+      classes,
+      style
+    } = useTable(props);
+    const isEmpty2 = computed(() => props.data.length === 0);
+    const ns = useNamespace("table");
+    const hiddenColumns = ref(null);
+    table2.hiddenColumns = hiddenColumns;
+    ctx.expose({
+      getCheckedRows() {
+        return store.getCheckedRows();
+      }
+    });
+    onMounted(async () => {
+      await nextTick();
+      store.updateColumns();
+    });
+    return () => {
+      var _a, _b;
+      return withDirectives(createVNode("div", {
+        "class": ns.b(),
+        "style": style.value
+      }, [createVNode("div", {
+        "ref": hiddenColumns,
+        "class": "hidden-columns"
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), props.fixHeader ? createVNode(FixHeader, {
+        "classes": classes.value,
+        "is-empty": isEmpty2.value
+      }, null) : createVNode(NormalHeader, {
+        "classes": classes.value,
+        "is-empty": isEmpty2.value
+      }, null), isEmpty2.value && createVNode("div", {
+        "class": ns.e("empty")
+      }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
+    };
+  }
+});
+const tableColumnProps = {
+  type: {
+    type: String,
+    default: ""
+  },
+  header: {
+    type: String
+  },
+  field: {
+    type: String,
+    default: ""
+  },
+  width: {
+    type: [String, Number],
+    default: ""
+  },
+  minWidth: {
+    type: [String, Number],
+    default: 80
+  },
+  formatter: {
+    type: Function
+  },
+  order: {
+    type: Number,
+    default: 0
+  },
+  sortable: {
+    type: Boolean,
+    default: false
+  },
+  sortDirection: {
+    type: String,
+    default: ""
+  },
+  sortMethod: {
+    type: Function
+  },
+  filterable: {
+    type: Boolean,
+    default: false
+  },
+  filterMultiple: {
+    type: Boolean,
+    default: true
+  },
+  filterList: {
+    type: Array,
+    default: []
+  },
+  fixedLeft: {
+    type: String
+  },
+  fixedRight: {
+    type: String
+  }
+};
+function formatWidth(width) {
+  if (typeof width === "number") {
+    return width;
+  }
+  return parseInt(width, 10) || 0;
+}
+function formatMinWidth(minWidth) {
+  return formatWidth(minWidth) || 80;
+}
+const cellMap = {
+  checkable: {
+    renderHeader(column, store) {
+      return h(Checkbox, {
+        modelValue: store.states._checkAll.value,
+        halfchecked: store.states._halfChecked.value,
+        onChange: (val) => {
+          store.states._checkAll.value = val;
+        }
+      });
+    },
+    renderCell(rowData, column, store, rowIndex) {
+      return h(Checkbox, {
+        modelValue: store.states._checkList.value[rowIndex],
+        onChange: (val) => {
+          store.states._checkList.value[rowIndex] = val;
+        }
+      });
+    }
+  },
+  index: {
+    renderHeader(column) {
+      var _a;
+      return h("span", {
+        class: "title"
+      }, (_a = column.header) != null ? _a : "#");
+    },
+    renderCell(rowData, column, store, rowIndex) {
+      return rowIndex + 1;
+    }
+  },
+  default: {
+    renderHeader(column) {
+      var _a;
+      return h("span", {
+        class: "title"
+      }, (_a = column.header) != null ? _a : "");
+    },
+    renderCell(rowData, column, store, rowIndex) {
+      var _a, _b;
+      const value = column.field ? rowData[column.field] : "";
+      if (column.formatter) {
+        return column.formatter(rowData, column, value, rowIndex);
+      }
+      return (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
+    }
+  }
+};
+function createColumn(props, slots) {
+  const {
+    type,
+    field,
+    header: header2,
+    sortable,
+    sortDirection,
+    width,
+    minWidth,
+    formatter,
+    sortMethod,
+    filterable,
+    filterList,
+    filterMultiple,
+    order,
+    fixedLeft,
+    fixedRight
+  } = props;
+  const column = reactive({});
+  column.type = type.value;
+  function renderHeader(columnItem, store) {
+    if (slots.header) {
+      return slots.header(columnItem);
+    }
+    return cellMap[type.value || "default"].renderHeader(columnItem, store);
+  }
+  function renderCell(rowData, columnItem, store, rowIndex) {
+    if (slots.default) {
+      return slots.default({ row: rowData, rowIndex });
+    }
+    return cellMap[type.value || "default"].renderCell(rowData, columnItem, store, rowIndex);
+  }
+  watch([field, header2, order], ([fieldVal, headerVal, orderVal]) => {
+    column.field = fieldVal;
+    column.header = headerVal;
+    column.order = orderVal;
+  }, { immediate: true });
+  watch([sortable, sortDirection, sortMethod], ([sortableVal, sortDirectionVal, sortMethodVal]) => {
+    column.sortable = sortableVal;
+    column.sortDirection = sortDirectionVal;
+    column.sortMethod = sortMethodVal;
+  }, { immediate: true });
+  watch([filterable, filterList, filterMultiple], ([filterableVal, filterListVal, filterMultipleVal]) => {
+    column.filterable = filterableVal;
+    column.filterMultiple = filterMultipleVal;
+    column.filterList = filterListVal;
+  }, { immediate: true });
+  watch([fixedLeft, fixedRight], ([left, right]) => {
+    column.fixedLeft = left;
+    column.fixedRight = right;
+  }, { immediate: true });
+  watch([width, minWidth], ([widthVal, minWidthVal]) => {
+    column.width = formatWidth(widthVal);
+    column.minWidth = formatMinWidth(minWidthVal);
+    column.realWidth = column.width || column.minWidth;
+  });
+  onBeforeMount(() => {
+    column.renderHeader = renderHeader;
+    column.renderCell = renderCell;
+    column.formatter = formatter == null ? void 0 : formatter.value;
+    column.customFilterTemplate = slots.customFilterTemplate;
+    column.subColumns = slots.subColumns;
+  });
+  return column;
+}
+function useRender() {
+  const instance = getCurrentInstance();
+  const columnOrTableParent = computed(() => {
+    let parent = instance == null ? void 0 : instance.parent;
+    while (parent && !parent.tableId && !parent.columnId) {
+      parent = parent.parent;
+    }
+    return parent;
+  });
+  const getColumnIndex = (children, child) => {
+    return Array.prototype.indexOf.call(children, child);
+  };
+  return { columnOrTableParent, getColumnIndex };
+}
+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);
+    const owner = inject(TABLE_TOKEN);
+    const isSubColumn = ref(false);
+    let columnId = "";
+    const {
+      columnOrTableParent,
+      getColumnIndex
+    } = useRender();
+    const parent = columnOrTableParent.value;
+    columnId = `${parent.tableId || parent.columnId}_column_${columnIdInit++}`;
+    column.ctx = ctx;
+    onBeforeMount(() => {
+      isSubColumn.value = owner !== parent;
+      column.id = columnId;
+    });
+    onMounted(() => {
+      var _a;
+      const children = isSubColumn.value ? parent.vnode.el.children : (_a = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _a.children;
+      const columnIndex = getColumnIndex(children || [], instance.vnode.el);
+      columnIndex > -1 && (owner == null ? void 0 : owner.store.insertColumn(column, isSubColumn.value ? parent.columnConfig : null));
+    });
+    watch(() => column.order, () => {
+      owner == null ? void 0 : owner.store.sortColumn();
+    });
+    onBeforeUnmount(() => {
+      owner == null ? void 0 : owner.store.removeColumn(column);
+    });
+    instance.columnId = columnId;
+    instance.columnConfig = column;
+  },
+  render() {
+    var _a, _b;
+    try {
+      const renderDefault = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
+        row: {},
+        column: {},
+        $index: -1
+      });
+      const children = [];
+      if (Array.isArray(renderDefault)) {
+        for (const childNode of renderDefault) {
+          if (childNode.type.name === "DColumn") {
+            children.push(childNode);
+          }
+        }
+      }
+      const vnode = h("div", children);
+      return vnode;
+    } catch {
+      return h("div", []);
+    }
+  }
+});
+var index = {
+  title: "Table \u8868\u683C",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "20%",
+  install(app) {
+    app.component(Table.name, Table);
+    app.component(Column.name, Column);
+  }
+};
+export { Column, Table, index as default };