vue-devui 1.0.0-rc.8 → 1.0.0-rc.9

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, h, render, resolveDirective, provide, toRef, createTextVNode, getCurrentInstance, reactive, onBeforeMount, onBeforeUnmount } from "vue";
+import { computed, ref, watch, unref, defineComponent, inject, createVNode, toRefs, onMounted, onUnmounted, Teleport, Transition, renderSlot, isVNode, nextTick, mergeProps, Comment, Text, h, Fragment, withDirectives, cloneVNode, provide, vShow, resolveDynamicComponent, render, resolveDirective, toRef, createTextVNode, getCurrentInstance, onBeforeMount, reactive, onBeforeUnmount } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const TableProps = {
@@ -89,6 +89,20 @@ const TableProps = {
   borderType: {
     type: String,
     default: ""
+  },
+  empty: {
+    type: String,
+    default: "No Data"
+  },
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  rowKey: {
+    type: String
+  },
+  trackBy: {
+    type: Function
   }
 };
 const TABLE_TOKEN = Symbol();
@@ -102,8 +116,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
   const b = () => createBem(namespace);
   const e = (element) => element ? createBem(namespace, element) : "";
   const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
@@ -115,29 +129,32 @@ function useNamespace(block) {
     em
   };
 }
-function useTable(props) {
-  const ns = useNamespace("table");
+function useTable(props, tableWidth) {
+  const ns2 = 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)
+    [ns2.e("view")]: true,
+    [ns2.m("striped")]: props.striped,
+    [ns2.m("header-bg")]: props.headerBg,
+    [ns2.m("layout-auto")]: props.tableLayout === "auto",
+    [ns2.m(`${props.size}`)]: true,
+    [ns2.m(`${props.borderType}`)]: Boolean(props.borderType)
   }));
-  const style = computed(() => ({
+  const styles = computed(() => ({
     maxHeight: props.maxHeight,
     maxWidth: props.maxWidth,
     height: props.tableHeight,
-    width: props.tableWidth
+    width: tableWidth.value ? `${tableWidth.value}px` : props.tableWidth
   }));
-  return { classes, style };
+  return { classes, styles };
 }
 const useFixedColumn = (column) => {
-  const ns = useNamespace("table");
+  const ns2 = 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)
+    [ns2.e("checkable-cell")]: column.value.type === "checkable",
+    [ns2.m("sticky-cell")]: Boolean(column.value.fixedLeft) || Boolean(column.value.fixedRight),
+    left: Boolean(column.value.fixedLeft),
+    right: Boolean(column.value.fixedRight),
+    [`is-${column.value.align}`]: true
   }));
   const stickyStyle = computed(() => ({
     left: column.value.fixedLeft,
@@ -145,6 +162,73 @@ const useFixedColumn = (column) => {
   }));
   return { stickyClass, stickyStyle };
 };
+function useTableLayout(table2) {
+  const tableWidth = ref();
+  const updateColgroupWidth = () => {
+    var _a, _b;
+    const cols = ((_b = (_a = table2 == null ? void 0 : table2.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.querySelectorAll("colgroup > col")) || [];
+    if (!cols.length) {
+      return;
+    }
+    const flatColumns = table2.store.states.flatColumns;
+    const columnMap = {};
+    flatColumns.value.forEach((column) => {
+      columnMap[column.id] = column;
+    });
+    for (let i = 0, len = cols.length; i < len; i++) {
+      const col = cols[i];
+      const columnId = col.getAttribute("column-id");
+      const column = columnMap[columnId];
+      if (column) {
+        col.setAttribute("width", column.realWidth);
+      }
+    }
+  };
+  const updateColumnWidth = () => {
+    var _a, _b;
+    const tableClientWidth = (_b = (_a = table2 == null ? void 0 : table2.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.clientWidth;
+    let tableMinWidth = 0;
+    const flatColumns = table2.store.states.flatColumns;
+    const flexColumns = flatColumns.value.filter((column) => typeof column.width !== "number");
+    if (flexColumns.length) {
+      flatColumns.value.forEach((column) => {
+        tableMinWidth += Number(column.width || 80);
+      });
+      if (tableMinWidth <= tableClientWidth) {
+        const totalFlexWidth = tableClientWidth - tableMinWidth;
+        if (flexColumns.length === 1) {
+          flexColumns[0].realWidth = Number(flexColumns[0].width || 80) + totalFlexWidth;
+        } else {
+          const allFlexColumnWidth = flexColumns.reduce((pre, column) => pre + Number(column.width || 80), 0);
+          const flexWidthPercent = totalFlexWidth / allFlexColumnWidth;
+          let exceptFistWidth = 0;
+          flexColumns.forEach((column, index2) => {
+            if (index2 === 0) {
+              return;
+            }
+            const perFlexWidth = Math.floor(Number(column.width || 80) * flexWidthPercent);
+            exceptFistWidth += perFlexWidth;
+            column.realWidth = Number(column.width || 80) + perFlexWidth;
+          });
+          flexColumns[0].realWidth = Number(flexColumns[0].width || 80) + totalFlexWidth - exceptFistWidth;
+        }
+      } else {
+        flexColumns.forEach((column) => {
+          column.realWidth = Number(column.width || 80);
+        });
+      }
+      tableWidth.value = Math.max(tableMinWidth, tableClientWidth);
+    } else {
+      flatColumns.value.forEach((column) => {
+        column.realWidth = column.width || 80;
+        tableMinWidth += Number(column.realWidth);
+      });
+      tableWidth.value = tableMinWidth;
+    }
+    updateColgroupWidth();
+  };
+  return { tableWidth, updateColumnWidth };
+}
 function replaceColumn(array, column) {
   return array.map((item) => {
     var _a;
@@ -171,7 +255,10 @@ const createColumnGenerator = () => {
   const _columns = ref([]);
   const flatColumns = ref([]);
   const sortColumn = () => {
-    _columns.value.sort((a, b) => a.order - b.order);
+    _columns.value.sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
   };
   const insertColumn = (column, parent) => {
     const array = unref(_columns);
@@ -201,43 +288,57 @@ const createColumnGenerator = () => {
   };
   return { _columns, flatColumns, insertColumn, removeColumn, sortColumn, updateColumns };
 };
-const createSelection = (dataSource, _data) => {
-  const _checkList = ref([]);
+const createSelection = (dataSource, trackBy) => {
+  const _checkSet = ref(/* @__PURE__ */ new Set());
+  const checkRow = (toggle, row) => {
+    if (toggle) {
+      _checkSet.value.add(trackBy(row));
+    } else {
+      _checkSet.value.delete(trackBy(row));
+    }
+  };
+  const isRowChecked = (row) => {
+    return _checkSet.value.has(trackBy(row));
+  };
+  const getCheckedRows = () => {
+    return dataSource.value.filter((item) => isRowChecked(item));
+  };
   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;
-      }
+      dataSource.value.forEach((item) => {
+        checkRow(val, item);
+      });
     }
   });
   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) {
+  watch(_checkSet, (set) => {
+    if (set.size === 0) {
       return;
     }
     let allTrue = true;
     let allFalse = true;
-    for (let i = 0; i < list2.length; i++) {
-      allTrue && (allTrue = list2[i]);
-      allFalse && (allFalse = !list2[i]);
+    const items = dataSource.value;
+    for (let i = 0; i < items.length; i++) {
+      const checked = isRowChecked(items[i]);
+      allTrue && (allTrue = checked);
+      allFalse && (allFalse = !checked);
     }
     _checkAllRecord.value = allTrue;
     _halfChecked.value = !(allFalse || allTrue);
   }, { immediate: true, deep: true });
-  const getCheckedRows = () => {
-    return _data.value.filter((_, index2) => _checkList.value[index2]);
-  };
+  watch(dataSource, (value) => {
+    _checkAllRecord.value = value.findIndex((item) => !isRowChecked(item)) === -1;
+  });
   return {
-    _checkList,
+    _checkSet,
     _checkAll,
     _halfChecked,
-    getCheckedRows
+    getCheckedRows,
+    checkRow,
+    isRowChecked
   };
 };
 const createSorter = (dataSource, _data) => {
@@ -259,45 +360,104 @@ const createFixedLogic = (columns) => {
   });
   return { isFixedLeft };
 };
-function createStore(dataSource) {
+const createExpandRow = (dataSource, trackBy) => {
+  const _expandedRows = ref(/* @__PURE__ */ new Set());
+  const isRowExpanded = (row) => {
+    return _expandedRows.value.has(trackBy(row));
+  };
+  const toggleRow = (row) => {
+    if (isRowExpanded(row)) {
+      _expandedRows.value.delete(trackBy(row));
+    } else {
+      _expandedRows.value.add(trackBy(row));
+    }
+  };
+  const getExpandedRows = () => {
+    return dataSource.value.filter((item) => isRowExpanded(item));
+  };
+  const expandAllRows = () => {
+    dataSource.value.forEach((item) => {
+      _expandedRows.value.add(trackBy(item));
+    });
+  };
+  return {
+    _expandedRows,
+    toggleRow,
+    isRowExpanded,
+    getExpandedRows,
+    expandAllRows
+  };
+};
+function createStore(dataSource, table2) {
   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 {
+    _columns,
+    flatColumns,
+    insertColumn,
+    removeColumn,
+    sortColumn,
+    updateColumns
+  } = createColumnGenerator();
+  const {
+    _checkAll,
+    _checkSet,
+    _halfChecked,
+    getCheckedRows,
+    isRowChecked,
+    checkRow
+  } = createSelection(_data, table2.props.trackBy);
   const { sortData, thList } = createSorter(dataSource, _data);
   const { isFixedLeft } = createFixedLogic(_columns);
+  const {
+    _expandedRows,
+    toggleRow,
+    isRowExpanded,
+    getExpandedRows,
+    expandAllRows
+  } = createExpandRow(dataSource, table2.props.trackBy);
   return {
+    _table: table2,
     states: {
       _data,
       _columns,
       flatColumns,
-      _checkList,
+      _checkSet,
       _checkAll,
       _halfChecked,
       isFixedLeft,
-      thList
+      thList,
+      _expandedRows
     },
     insertColumn,
     sortColumn,
     removeColumn,
     updateColumns,
     getCheckedRows,
-    sortData
+    toggleRow,
+    isRowExpanded,
+    getExpandedRows,
+    expandAllRows,
+    sortData,
+    isRowChecked,
+    checkRow
   };
 }
 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) => {
+    const columns = parent == null ? void 0 : parent.store.states.flatColumns;
+    const isFixed = computed(() => (parent == null ? void 0 : parent.props.tableLayout) === "fixed");
+    return () => createVNode("colgroup", null, [columns == null ? void 0 : columns.value.map((column, index2) => {
       return createVNode("col", {
         "key": index2,
-        "width": column.realWidth
+        "column-id": isFixed.value ? column.id : "",
+        "width": column.type === "expand" ? 60 : isFixed.value ? column.realWidth : column.width || ""
       }, null);
-    })]) : null;
+    })]);
   }
 });
 const sortProps = {
@@ -429,6 +589,7 @@ const dropdownProps = {
     default: true
   }
 };
+const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 function getElement(element) {
   if (element instanceof Element) {
     return element;
@@ -595,14 +756,14 @@ function _isSlot$1(s) {
 }
 const CommonOverlay = defineComponent({
   setup(props, ctx) {
-    const ns = useNamespace("overlay");
+    const ns2 = useNamespace("overlay");
     return () => {
       let _slot;
       return createVNode(Teleport, {
         "to": "#d-overlay-anchor"
       }, {
         default: () => [createVNode(Transition, {
-          "name": ns.e("fade")
+          "name": ns2.e("fade")
         }, _isSlot$1(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
           default: () => [_slot]
         })]
@@ -645,12 +806,12 @@ const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
 });
 const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx) {
-  const ns = useNamespace("overlay");
+  const ns2 = useNamespace("overlay");
   const backgroundClass = computed(() => {
-    return [ns.e("background"), props.backgroundClass, !props.hasBackdrop ? ns.em("background", "disabled") : ns.em("background", "color")];
+    return [ns2.e("background"), props.backgroundClass, !props.hasBackdrop ? ns2.em("background", "disabled") : ns2.em("background", "color")];
   });
   const overlayClass = computed(() => {
-    return ns.b();
+    return ns2.b();
   });
   const handleBackdropClick = (event) => {
     var _a;
@@ -860,7 +1021,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns = useNamespace("flexible-overlay");
+    const ns2 = useNamespace("flexible-overlay");
     const {
       arrowRef,
       overlayRef,
@@ -873,14 +1034,70 @@ const FlexibleOverlay = defineComponent({
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
-        "class": ns.b()
+        "class": ns2.b()
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
-        "class": ns.e("arrow")
+        "class": ns2.e("arrow")
       }, null)]);
     };
   }
 });
+const inBrowser = typeof window !== "undefined";
+const isObject = (val) => val !== null && typeof val === "object";
+const ns = useNamespace("popper-trigger");
+function wrapContent(content) {
+  return h("span", { class: ns.b() }, content);
+}
+function getFirstValidChild(nodes) {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue;
+      }
+      if (child.type === "svg" || child.type === Text) {
+        return wrapContent(child);
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children);
+      }
+      return child;
+    }
+    return wrapContent(child);
+  }
+  return null;
+}
+var PopperTrigger = defineComponent({
+  name: "DPopperTrigger",
+  setup(_, ctx) {
+    const {
+      slots,
+      attrs
+    } = ctx;
+    return () => {
+      var _a;
+      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
+      if (!defaultSlot) {
+        return null;
+      }
+      const firstValidChild = getFirstValidChild(defaultSlot);
+      if (!firstValidChild) {
+        return null;
+      }
+      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
+        mounted(el) {
+          triggerRef.value = el;
+        },
+        updated(el) {
+          triggerRef.value = el;
+        },
+        unmounted() {
+          triggerRef.value = null;
+        }
+      }]]);
+    };
+  }
+});
 var dropdown = "";
 let dropdownId = 1;
 var Dropdown = defineComponent({
@@ -909,7 +1126,8 @@ var Dropdown = defineComponent({
     const id = `dropdown_${dropdownId++}`;
     const isOpen = ref(false);
     const currentPosition = ref("bottom");
-    const ns = useNamespace("dropdown");
+    const ns2 = useNamespace("dropdown");
+    provide(POPPER_TRIGGER_TOKEN, origin);
     useDropdownEvent({
       id,
       isOpen,
@@ -936,41 +1154,40 @@ var Dropdown = defineComponent({
     expose({
       updatePosition: () => overlayRef.value.updatePosition()
     });
-    return () => {
-      var _a;
-      return createVNode(Fragment, null, [createVNode("div", {
-        "ref": origin,
-        "class": ns.e("toggle")
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
-        "to": "body"
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
       }, {
-        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: () => [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": ns.e("menu-wrap")
-              }, attrs), [(_a2 = slots.menu) == null ? void 0 : _a2.call(slots)])];
-            }
-          }), [[vShow, overlayShowValue.value]])]
-        })]
-      })]);
-    };
+          default: () => {
+            var _a;
+            return [createVNode("div", mergeProps({
+              "ref": dropdownRef,
+              "class": ns2.e("menu-wrap")
+            }, attrs), [(_a = slots.menu) == null ? void 0 : _a.call(slots)])];
+          }
+        }), [[vShow, overlayShowValue.value]])]
+      })]
+    })]);
   }
 });
 const dropdownMenuProps = {
@@ -1028,7 +1245,7 @@ defineComponent({
       overlayClass
     } = toRefs(props);
     const dropdownMenuRef = ref(null);
-    const ns = useNamespace("dropdown");
+    const ns2 = useNamespace("dropdown");
     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))) {
@@ -1046,7 +1263,7 @@ defineComponent({
       "to": "body"
     }, {
       default: () => [createVNode(Transition, {
-        "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
+        "name": showAnimation.value ? ns2.m(`fade-${currentPosition.value}`) : ""
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "modelValue": modelValue.value,
@@ -1063,7 +1280,7 @@ defineComponent({
             var _a;
             return [createVNode("div", mergeProps({
               "ref": dropdownMenuRef,
-              "class": ns.e("menu-wrap")
+              "class": ns2.e("menu-wrap")
             }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
           }
         })]
@@ -1071,6 +1288,10 @@ defineComponent({
     });
   }
 });
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
     type: String,
@@ -1078,43 +1299,112 @@ const iconProps = {
     required: true
   },
   size: {
-    type: String,
+    type: [Number, String],
     default: "inherit"
   },
   color: {
     type: String,
     default: "inherit"
   },
+  component: {
+    type: Object,
+    default: null
+  },
   classPrefix: {
     type: String,
-    default: "icon"
+    default: DEFAULT_PREFIX
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
   }
 };
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns2 = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns2.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
-  setup(props) {
+  setup(props, {
+    attrs
+  }) {
     const {
+      component,
       name,
       size,
       color,
       classPrefix
     } = toRefs(props);
-    return () => {
-      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const svgIconDom = () => {
+      return createVNode(IconComponent, mergeProps({
+        "name": name.value,
+        "color": color.value,
+        "size": iconSize.value
+      }, attrs), null);
+    };
+    const imgIconDom = () => {
+      return createVNode("img", mergeProps({
         "src": name.value,
         "alt": name.value.split("/")[name.value.split("/").length - 1],
         "style": {
-          width: size.value,
-          verticalAlign: "text-bottom"
+          width: iconSize.value || ""
         }
-      }, null) : createVNode("i", {
-        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+      }, attrs), null);
+    };
+    const fontIconDom = () => {
+      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+      return createVNode("i", mergeProps({
+        "class": [classPrefix.value, fontIconClass],
         "style": {
-          fontSize: size.value,
+          fontSize: iconSize.value,
           color: color.value
         }
-      }, null);
+      }, attrs), null);
+    };
+    return () => {
+      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
     };
   }
 });
@@ -1186,28 +1476,28 @@ var Loading = defineComponent({
       message,
       $slots
     } = this;
-    const ns = useNamespace("loading");
+    const ns2 = useNamespace("loading");
     return isShow && createVNode("div", {
-      "class": [ns.b(), isFull ? ns.m("full") : ""]
+      "class": [ns2.b(), isFull ? ns2.m("full") : ""]
     }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
-      "class": ns.e("wrapper")
+      "class": ns2.e("wrapper")
     }, [backdrop ? createVNode("div", {
-      "class": ns.e("mask")
+      "class": ns2.e("mask")
     }, null) : null, createVNode("div", {
       "style": style,
-      "class": ns.e("area")
+      "class": ns2.e("area")
     }, [createVNode("div", {
-      "class": ns.e("busy-default-spinner")
+      "class": ns2.e("busy-default-spinner")
     }, [createVNode("div", {
-      "class": ns.e("bar1")
+      "class": ns2.e("bar1")
     }, null), createVNode("div", {
-      "class": ns.e("bar2")
+      "class": ns2.e("bar2")
     }, null), createVNode("div", {
-      "class": ns.e("bar3")
+      "class": ns2.e("bar3")
     }, null), createVNode("div", {
-      "class": ns.e("bar4")
+      "class": ns2.e("bar4")
     }, null)]), message ? createVNode("span", {
-      "class": ns.e("text")
+      "class": ns2.e("text")
     }, [message]) : null])])]);
   }
 });
@@ -2100,7 +2390,7 @@ var lodash = { exports: {} };
         function object() {
         }
         return function(proto) {
-          if (!isObject(proto)) {
+          if (!isObject2(proto)) {
             return {};
           }
           if (objectCreate) {
@@ -2462,7 +2752,7 @@ var lodash = { exports: {} };
         if (result2 !== undefined$1) {
           return result2;
         }
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return value;
         }
         var isArr = isArray(value);
@@ -2809,7 +3099,7 @@ var lodash = { exports: {} };
         return true;
       }
       function baseIsNative(value) {
-        if (!isObject(value) || isMasked(value)) {
+        if (!isObject2(value) || isMasked(value)) {
           return false;
         }
         var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
@@ -2849,7 +3139,7 @@ var lodash = { exports: {} };
         return result2;
       }
       function baseKeysIn(object) {
-        if (!isObject(object)) {
+        if (!isObject2(object)) {
           return nativeKeysIn(object);
         }
         var isProto = isPrototype(object), result2 = [];
@@ -2894,7 +3184,7 @@ var lodash = { exports: {} };
         }
         baseFor(source, function(srcValue, key) {
           stack || (stack = new Stack());
-          if (isObject(srcValue)) {
+          if (isObject2(srcValue)) {
             baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
           } else {
             var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : undefined$1;
@@ -2934,7 +3224,7 @@ var lodash = { exports: {} };
             newValue = objValue;
             if (isArguments(objValue)) {
               newValue = toPlainObject(objValue);
-            } else if (!isObject(objValue) || isFunction(objValue)) {
+            } else if (!isObject2(objValue) || isFunction(objValue)) {
               newValue = initCloneObject(srcValue);
             }
           } else {
@@ -3073,7 +3363,7 @@ var lodash = { exports: {} };
         return shuffleSelf(array, baseClamp(n, 0, array.length));
       }
       function baseSet(object, path, value, customizer) {
-        if (!isObject(object)) {
+        if (!isObject2(object)) {
           return object;
         }
         path = castPath(path, object);
@@ -3087,7 +3377,7 @@ var lodash = { exports: {} };
             var objValue = nested[key];
             newValue = customizer ? customizer(objValue, key, nested) : undefined$1;
             if (newValue === undefined$1) {
-              newValue = isObject(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
+              newValue = isObject2(objValue) ? objValue : isIndex(path[index2 + 1]) ? [] : {};
             }
           }
           assignValue(nested, key, newValue);
@@ -3318,7 +3608,7 @@ var lodash = { exports: {} };
         end = end === undefined$1 ? length : end;
         return !start && end >= length ? array : baseSlice(array, start, end);
       }
-      var clearTimeout = ctxClearTimeout || function(id) {
+      var clearTimeout2 = ctxClearTimeout || function(id) {
         return root.clearTimeout(id);
       };
       function cloneBuffer(buffer, isDeep) {
@@ -3537,7 +3827,7 @@ var lodash = { exports: {} };
               return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
           }
           var thisBinding = baseCreate(Ctor.prototype), result2 = Ctor.apply(thisBinding, args);
-          return isObject(result2) ? result2 : thisBinding;
+          return isObject2(result2) ? result2 : thisBinding;
         };
       }
       function createCurry(func, bitmask, arity) {
@@ -3851,7 +4141,7 @@ var lodash = { exports: {} };
         return objValue;
       }
       function customDefaultsMerge(objValue, srcValue, key, object, source, stack) {
-        if (isObject(objValue) && isObject(srcValue)) {
+        if (isObject2(objValue) && isObject2(srcValue)) {
           stack.set(srcValue, objValue);
           baseMerge(objValue, srcValue, undefined$1, customDefaultsMerge, stack);
           stack["delete"](srcValue);
@@ -4199,7 +4489,7 @@ var lodash = { exports: {} };
         return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
       }
       function isIterateeCall(value, index2, object) {
-        if (!isObject(object)) {
+        if (!isObject2(object)) {
           return false;
         }
         var type = typeof index2;
@@ -4242,7 +4532,7 @@ var lodash = { exports: {} };
         return value === proto;
       }
       function isStrictComparable(value) {
-        return value === value && !isObject(value);
+        return value === value && !isObject2(value);
       }
       function matchesStrictComparable(key, srcValue) {
         return function(object) {
@@ -5124,7 +5414,7 @@ var lodash = { exports: {} };
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
-        if (isObject(options)) {
+        if (isObject2(options)) {
           leading = !!options.leading;
           maxing = "maxWait" in options;
           maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
@@ -5167,7 +5457,7 @@ var lodash = { exports: {} };
         }
         function cancel() {
           if (timerId !== undefined$1) {
-            clearTimeout(timerId);
+            clearTimeout2(timerId);
           }
           lastInvokeTime = 0;
           lastArgs = lastCallTime = lastThis = timerId = undefined$1;
@@ -5185,7 +5475,7 @@ var lodash = { exports: {} };
               return leadingEdge(lastCallTime);
             }
             if (maxing) {
-              clearTimeout(timerId);
+              clearTimeout2(timerId);
               timerId = setTimeout2(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
@@ -5294,7 +5584,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        if (isObject(options)) {
+        if (isObject2(options)) {
           leading = "leading" in options ? !!options.leading : leading;
           trailing = "trailing" in options ? !!options.trailing : trailing;
         }
@@ -5402,7 +5692,7 @@ var lodash = { exports: {} };
         return typeof value == "number" && nativeIsFinite(value);
       }
       function isFunction(value) {
-        if (!isObject(value)) {
+        if (!isObject2(value)) {
           return false;
         }
         var tag = baseGetTag(value);
@@ -5414,7 +5704,7 @@ var lodash = { exports: {} };
       function isLength(value) {
         return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
       }
-      function isObject(value) {
+      function isObject2(value) {
         var type = typeof value;
         return value != null && (type == "object" || type == "function");
       }
@@ -5521,9 +5811,9 @@ var lodash = { exports: {} };
         if (isSymbol(value)) {
           return NAN;
         }
-        if (isObject(value)) {
+        if (isObject2(value)) {
           var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-          value = isObject(other) ? other + "" : other;
+          value = isObject2(other) ? other + "" : other;
         }
         if (typeof value != "string") {
           return value === 0 ? value : +value;
@@ -5744,7 +6034,7 @@ var lodash = { exports: {} };
           var Ctor = object && object.constructor;
           if (isArrLike) {
             accumulator = isArr ? new Ctor() : [];
-          } else if (isObject(object)) {
+          } else if (isObject2(object)) {
             accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {};
           } else {
             accumulator = {};
@@ -6026,7 +6316,7 @@ var lodash = { exports: {} };
       }
       function truncate(string, options) {
         var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-        if (isObject(options)) {
+        if (isObject2(options)) {
           var separator = "separator" in options ? options.separator : separator;
           length = "length" in options ? toInteger(options.length) : length;
           omission = "omission" in options ? baseToString(options.omission) : omission;
@@ -6156,13 +6446,13 @@ var lodash = { exports: {} };
       });
       function mixin(object, source, options) {
         var props = keys(source), methodNames = baseFunctions(source, props);
-        if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
+        if (options == null && !(isObject2(source) && (methodNames.length || !props.length))) {
           options = source;
           source = object;
           object = this;
           methodNames = baseFunctions(source, keys(source));
         }
-        var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
+        var chain2 = !(isObject2(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
         arrayEach(methodNames, function(methodName) {
           var func = source[methodName];
           object[methodName] = func;
@@ -6508,7 +6798,7 @@ var lodash = { exports: {} };
       lodash2.isNil = isNil;
       lodash2.isNull = isNull;
       lodash2.isNumber = isNumber;
-      lodash2.isObject = isObject;
+      lodash2.isObject = isObject2;
       lodash2.isObjectLike = isObjectLike;
       lodash2.isPlainObject = isPlainObject;
       lodash2.isRegExp = isRegExp;
@@ -6771,7 +7061,7 @@ var lodash = { exports: {} };
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
 function useButton(props, ctx) {
-  const ns = useNamespace("button");
+  const ns2 = useNamespace("button");
   const hasContent = computed(() => ctx.slots.default);
   const colorMap = {
     solid: "primary",
@@ -6784,20 +7074,20 @@ function useButton(props, ctx) {
     return (buttonGroupConf == null ? void 0 : buttonGroupConf.size.value) || props.size;
   });
   const classes = computed(() => ({
-    [ns.b()]: true,
-    [ns.m(props.variant)]: true,
-    [`${ns.m(props.variant)}--${props.color || defaultColor}`]: true,
-    [ns.m(buttonSize.value)]: true,
-    [ns.e("icon-wrap")]: props.icon,
-    [ns.e("icon")]: props.icon && !hasContent.value,
-    [ns.m("is-loading")]: props.loading,
-    [ns.m(props.shape || "")]: props.shape && lodash.exports.isString(props.shape) ? true : false
+    [ns2.b()]: true,
+    [ns2.m(props.variant)]: true,
+    [`${ns2.m(props.variant)}--${props.color || defaultColor}`]: true,
+    [ns2.m(buttonSize.value)]: true,
+    [ns2.e("icon-wrap")]: props.icon,
+    [ns2.e("icon")]: props.icon && !hasContent.value,
+    [ns2.m("is-loading")]: props.loading,
+    [ns2.m(props.shape || "")]: props.shape && lodash.exports.isString(props.shape) ? true : false
   }));
   const iconClass = computed(() => {
     if (!props.icon) {
       return "";
     }
-    const origin = `${ns.e("icon-fix")} icon`;
+    const origin = `${ns2.e("icon-fix")} icon`;
     if (hasContent.value) {
       return `${origin} clear-right-5`;
     } else {
@@ -6816,7 +7106,7 @@ var Button = defineComponent({
   emits: ["click"],
   setup(props, ctx) {
     const {
-      icon,
+      icon: icon2,
       disabled,
       loading: loading2
     } = toRefs(props);
@@ -6836,8 +7126,8 @@ var Button = defineComponent({
         "class": classes.value,
         "disabled": disabled.value,
         "onClick": onClick
-      }, [icon.value && createVNode(Icon, {
-        "name": icon.value,
+      }, [icon2.value && createVNode(Icon, {
+        "name": icon2.value,
         "size": "var(--devui-font-size, 12px)",
         "color": "",
         "class": iconClass.value
@@ -6854,13 +7144,13 @@ defineComponent({
   setup(props, {
     slots
   }) {
-    const ns = useNamespace("button-group");
+    const ns2 = useNamespace("button-group");
     provide(buttonGroupInjectionKey, {
       size: toRef(props, "size")
     });
     return () => {
       return createVNode("div", {
-        "class": ns.b()
+        "class": ns2.b()
       }, [slots.default && slots.default()]);
     };
   }
@@ -6896,6 +7186,10 @@ const commonProps = {
   beforeChange: {
     type: Function,
     default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
@@ -6904,11 +7198,11 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
     default: false
   },
   value: {
-    type: String
+    type: [Number, String]
   },
   label: {
     type: String,
-    default: void 0
+    default: ""
   },
   "onUpdate:checked": {
     type: Function,
@@ -6923,6 +7217,10 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
   },
   "onUpdate:modelValue": {
     type: Function
+  },
+  border: {
+    type: Boolean,
+    default: false
   }
 });
 const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
@@ -6949,163 +7247,261 @@ const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
   "onUpdate:modelValue": {
     type: Function,
     default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: void 0
+  },
+  textColor: {
+    type: String,
+    default: ""
   }
 });
 const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+function useCheckbox(props, ctx) {
+  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+  const isChecked = computed(() => props.checked || props.modelValue);
+  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 isLimitDisabled = computed(() => {
+    const max = checkboxGroupConf == null ? void 0 : checkboxGroupConf.max.value;
+    return !!max && (checkboxGroupConf == null ? void 0 : checkboxGroupConf.modelValue.value.length) >= max && !mergedChecked.value;
+  });
+  const mergedDisabled = computed(() => {
+    return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled || isLimitDisabled.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());
+  };
+  const size = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.size.value) != null ? _a : props.size;
+  });
+  const border = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.border.value) != null ? _a : props.border;
+  });
+  return {
+    mergedChecked,
+    mergedDisabled,
+    mergedIsShowTitle,
+    mergedShowAnimation,
+    mergedColor,
+    itemWidth,
+    direction,
+    handleClick,
+    size,
+    border
+  };
+}
+function useCheckboxGroup(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 (["string", "number"].includes(typeof valList.value[0])) {
+      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 (["string", "number"].includes(typeof valList.value[0])) {
+      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"),
+    size: toRef(props, "size"),
+    border: toRef(props, "border"),
+    max: toRef(props, "max"),
+    modelValue: toRef(props, "modelValue"),
+    textColor: toRef(props, "textColor")
+  });
+  return { defaultOpt };
+}
+function useCheckboxButton() {
+  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+  const mergedTextColor = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.textColor.value) != null ? _a : void 0;
+  });
+  return {
+    mergedTextColor
+  };
+}
 var checkbox = "";
 var Checkbox = defineComponent({
   name: "DCheckbox",
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
-    const ns = useNamespace("checkbox");
-    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,
-      ns
-    };
-  },
-  render() {
-    var _a;
+    const ns2 = useNamespace("checkbox");
     const {
-      itemWidth,
-      direction,
       mergedChecked,
       mergedDisabled,
       mergedIsShowTitle,
       mergedShowAnimation,
-      halfChecked,
-      title,
-      label,
-      handleClick,
-      name,
-      value,
       mergedColor,
-      ns,
-      $slots
-    } = this;
-    const wrapperCls = {
-      [ns.e("column-margin")]: direction === "column",
-      [ns.e("wrap")]: typeof itemWidth !== "undefined"
-    };
-    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
-    const checkboxCls = {
-      [ns.b()]: true,
-      active: mergedChecked,
-      "half-checked": 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 = {
-      [ns.e("material")]: true,
-      "custom-color": mergedColor,
-      [ns.m("no-label")]: !label && !$slots.default,
-      [ns.m("no-animation")]: !mergedShowAnimation,
-      [ns.e("default-background")]: !halfChecked
-    };
-    const polygonCls = {
-      [ns.e("tick")]: true,
-      [ns.m("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": ns.e("input"),
-      "type": "checkbox"
-    }, inputProps, {
-      "checked": mergedChecked,
-      "disabled": mergedDisabled,
-      "onClick": stopPropagation,
-      "onChange": stopPropagation
-    }), null), createVNode("span", {
-      "style": spanStyle,
-      "class": spanCls
-    }, [createVNode("span", {
-      "class": ns.e("halfchecked-bg")
-    }, null), createVNode("svg", {
-      "viewBox": "0 0 16 16",
-      "version": "1.1",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "class": ns.e("tick-wrap")
-    }, [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))])])]);
-  }
+      itemWidth,
+      direction,
+      handleClick,
+      size,
+      border
+    } = useCheckbox(props, ctx);
+    return () => {
+      var _a, _b;
+      const wrapperCls = {
+        [ns2.e("column-margin")]: direction === "column",
+        [ns2.e("wrap")]: typeof itemWidth !== "undefined"
+      };
+      const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+      const checkboxCls = {
+        [ns2.b()]: true,
+        active: mergedChecked.value,
+        "half-checked": props.halfChecked,
+        disabled: mergedDisabled.value,
+        unchecked: !mergedChecked.value
+      };
+      const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
+      const bgImgStyle = mergedColor.value && props.halfChecked || mergedColor.value ? `linear-gradient(${mergedColor.value}, ${mergedColor.value})` : "";
+      const spanStyle = [`border-color:${(mergedChecked.value || props.halfChecked) && mergedColor.value ? mergedColor.value : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor.value && props.halfChecked ? mergedColor.value : ""}`];
+      const spanCls = {
+        [ns2.e("material")]: true,
+        "custom-color": mergedColor.value,
+        [ns2.m("no-label")]: !props.label && !ctx.slots.default,
+        [ns2.m("no-animation")]: !mergedShowAnimation.value,
+        [ns2.e("default-background")]: !props.halfChecked
+      };
+      const polygonCls = {
+        [ns2.e("tick")]: true,
+        [ns2.m("no-animation")]: !mergedShowAnimation.value
+      };
+      const labelCls = {
+        [ns2.m(size.value)]: border.value,
+        [ns2.m("bordered")]: border.value
+      };
+      const stopPropagation = ($event) => $event.stopPropagation();
+      const inputProps = {
+        indeterminate: props.halfChecked
+      };
+      return createVNode("div", {
+        "class": wrapperCls,
+        "style": wrapperStyle
+      }, [createVNode("div", {
+        "class": checkboxCls
+      }, [createVNode("label", {
+        "title": labelTitle,
+        "onClick": handleClick,
+        "class": labelCls,
+        "style": {
+          width: itemWidth ? "100%" : "auto"
+        }
+      }, [createVNode("input", mergeProps({
+        "name": props.name || props.value,
+        "class": ns2.e("input"),
+        "type": "checkbox"
+      }, inputProps, {
+        "checked": mergedChecked.value,
+        "disabled": mergedDisabled.value,
+        "onClick": stopPropagation,
+        "onChange": stopPropagation
+      }), null), createVNode("span", {
+        "style": spanStyle,
+        "class": spanCls
+      }, [createVNode("span", {
+        "class": ns2.e("halfchecked-bg")
+      }, null), createVNode("svg", {
+        "viewBox": "0 0 16 16",
+        "version": "1.1",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "class": ns2.e("tick-wrap")
+      }, [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)])])]), props.label || ((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a))])])]);
+    };
+  }
 });
 var checkboxGroup = "";
 defineComponent({
@@ -7113,92 +7509,97 @@ defineComponent({
   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 {
+    const ns2 = useNamespace("checkbox");
+    const {
       defaultOpt
+    } = useCheckboxGroup(props, ctx);
+    return () => {
+      var _a, _b;
+      let children = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
+      const getContent = () => {
+        var _a2;
+        if (children) {
+          return children;
+        } else {
+          if (((_a2 = props.options) == null ? void 0 : _a2.length) > 0) {
+            children = props.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 children;
+        }
+      };
+      return createVNode("div", {
+        "class": ns2.e("group")
+      }, [createVNode("div", {
+        "class": {
+          [ns2.m("list-inline")]: props.direction === "row"
+        }
+      }, [getContent()])]);
     };
-  },
-  render() {
-    var _a;
+  }
+});
+var checkboxButton = "";
+defineComponent({
+  name: "DCheckboxButton",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("checkbox-button");
     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])]);
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedColor,
+      handleClick,
+      size
+    } = useCheckbox(props, ctx);
+    const {
+      mergedTextColor
+    } = useCheckboxButton();
+    return () => {
+      var _a, _b;
+      const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
+      const spanStyle = [`border-color:${mergedChecked.value && mergedColor.value ? mergedColor.value : ""}`, `background-color:${mergedChecked.value && mergedColor.value ? mergedColor.value : ""}`, `color:${mergedChecked.value && mergedTextColor.value ? mergedTextColor.value : ""}`];
+      const labelCls = {
+        [ns2.b()]: true,
+        active: mergedChecked.value,
+        disabled: mergedDisabled.value,
+        unchecked: !mergedChecked.value
+      };
+      const spanCls = {
+        [ns2.e("content")]: true,
+        [ns2.m(size.value)]: true
+      };
+      const stopPropagation = ($event) => $event.stopPropagation();
+      return createVNode("label", {
+        "title": labelTitle,
+        "onClick": handleClick,
+        "class": labelCls
+      }, [createVNode("input", {
+        "name": props.name || props.value,
+        "class": ns2.e("input"),
+        "type": "checkbox",
+        "checked": mergedChecked.value,
+        "disabled": mergedDisabled.value,
+        "onClick": stopPropagation,
+        "onChange": stopPropagation
+      }, null), createVNode("span", {
+        "style": spanStyle,
+        "class": spanCls
+      }, [props.label || ((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a))])]);
+    };
   }
 });
 function useFilterRender(ctx) {
@@ -7301,7 +7702,7 @@ var MultipleFilter = defineComponent({
     }, [createVNode(Checkbox, {
       "modelValue": _checkAll.value,
       "onUpdate:modelValue": ($event) => _checkAll.value = $event,
-      "halfchecked": _halfChecked.value,
+      "halfChecked": _halfChecked.value,
       "label": "\u5168\u9009"
     }, null)])]), createVNode("div", {
       "class": "filter-multiple-menu"
@@ -7327,11 +7728,11 @@ var List = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns = useNamespace("list");
+    const ns2 = useNamespace("list");
     return () => {
       var _a;
       return createVNode("div", {
-        "class": ns.b()
+        "class": ns2.b()
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
@@ -7342,11 +7743,11 @@ var ListItem = defineComponent({
   setup(props, {
     slots
   }) {
-    const ns = useNamespace("list-item");
+    const ns2 = useNamespace("list-item");
     return () => {
       var _a;
       return createVNode("div", {
-        "class": ns.b()
+        "class": ns2.b()
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
@@ -7438,6 +7839,13 @@ var Filter = defineComponent({
     });
   }
 });
+function useBaseRender(column) {
+  const baseClass = computed(() => ({
+    operable: column.value.filterable || column.value.sortable || column.value.resizeable,
+    resizeable: column.value.resizeable
+  }));
+  return { baseClass };
+}
 function useSort(column) {
   const table2 = inject(TABLE_TOKEN);
   const store = table2.store;
@@ -7482,6 +7890,79 @@ function useFilter(column) {
   };
   return { filterClass, handleFilter };
 }
+function handleWidth(width) {
+  if (!width) {
+    return;
+  }
+  if (typeof width === "number") {
+    return width;
+  }
+  return parseInt(width, 10);
+}
+function getFinalWidth(newWidth, minWidth, maxWidth) {
+  const realMinWidth = handleWidth(minWidth);
+  const realMaxWidth = handleWidth(maxWidth);
+  const overMinWidth = !realMinWidth || newWidth >= realMinWidth;
+  const underMaxWidth = !realMaxWidth || newWidth <= realMaxWidth;
+  const finalWidth = !overMinWidth ? realMinWidth : !underMaxWidth ? realMaxWidth : newWidth;
+  return finalWidth;
+}
+function useDragColumnWidth(elementRef, column) {
+  let initialWidth = 0;
+  let mouseDownScreenX = 0;
+  let resizeBarElement;
+  const table2 = inject(TABLE_TOKEN);
+  const dragClass = ref("");
+  const resizing = ref(false);
+  const tableElement = table2.tableRef;
+  const onMousemove = (e) => {
+    const movementX = e.clientX - mouseDownScreenX;
+    const newWidth = initialWidth + movementX;
+    const finalWidth = getFinalWidth(newWidth, column.value.minWidth, column.value.maxWidth);
+    if (resizeBarElement) {
+      resizeBarElement.style.left = `${finalWidth + elementRef.value.offsetLeft}px`;
+    }
+    column.value.ctx.emit("resizing", { width: finalWidth });
+  };
+  const onMouseup = (e) => {
+    const movementX = e.clientX - mouseDownScreenX;
+    const newWidth = initialWidth + movementX;
+    const finalWidth = getFinalWidth(newWidth, column.value.minWidth, column.value.maxWidth);
+    column.value.width = finalWidth;
+    column.value.realWidth = finalWidth;
+    table2.updateColumnWidth();
+    resizing.value = false;
+    tableElement == null ? void 0 : tableElement.value.classList.remove("table-selector");
+    dragClass.value = "";
+    tableElement == null ? void 0 : tableElement.value.removeChild(resizeBarElement);
+    column.value.ctx.emit("resize-end", { width: finalWidth, beforeWidth: initialWidth });
+    document.removeEventListener("mouseup", onMouseup);
+    document.removeEventListener("mousemove", onMousemove);
+  };
+  const onMousedown = (e) => {
+    const isHandle = e.target.classList.contains("resize-handle");
+    if (isHandle) {
+      column.value.ctx.emit("resize-start");
+      const initialOffset = elementRef.value.offsetLeft;
+      initialWidth = elementRef.value.clientWidth;
+      mouseDownScreenX = e.clientX;
+      e.stopPropagation();
+      resizing.value = true;
+      tableElement == null ? void 0 : tableElement.value.classList.add("table-selector");
+      resizeBarElement = document.createElement("div");
+      resizeBarElement.classList.add("resize-bar");
+      if (tableElement.value) {
+        resizeBarElement.style.display = "block";
+        resizeBarElement.style.left = initialOffset + initialWidth + "px";
+        tableElement.value.appendChild(resizeBarElement);
+      }
+      dragClass.value = "hover-bg";
+      document.addEventListener("mouseup", onMouseup);
+      document.addEventListener("mousemove", onMousemove);
+    }
+  };
+  return { resizing, dragClass, onMousedown };
+}
 var TH = defineComponent({
   name: "DTableHeaderTh",
   props: {
@@ -7495,9 +7976,13 @@ var TH = defineComponent({
   }) {
     const table2 = inject(TABLE_TOKEN);
     const store = table2.store;
+    const headerContainerRef = ref();
     const {
       column
     } = toRefs(props);
+    const {
+      baseClass
+    } = useBaseRender(column);
     const {
       direction,
       sortClass,
@@ -7512,16 +7997,23 @@ var TH = defineComponent({
       stickyClass,
       stickyStyle
     } = useFixedColumn(column);
+    const {
+      resizing,
+      dragClass,
+      onMousedown
+    } = useDragColumnWidth(headerContainerRef, column);
     expose({
       clearSortOrder
     });
     return () => {
       var _a, _b;
       return createVNode("th", {
-        "class": [stickyClass.value, sortClass.value, filterClass.value],
+        "class": [baseClass.value, stickyClass.value, sortClass.value, filterClass.value, dragClass.value],
         "style": stickyStyle.value
       }, [createVNode("div", {
-        "class": "header-container"
+        "ref": headerContainerRef,
+        "class": "header-container",
+        "onMousedown": onMousedown
       }, [(_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,
@@ -7529,6 +8021,12 @@ var TH = defineComponent({
       }, null), column.value.sortable && createVNode(Sort, {
         "sort-direction": direction.value,
         "onSort": handleSort
+      }, null), column.value.resizeable && createVNode("span", {
+        "class": "resize-handle",
+        "onClick": (e) => e.stopPropagation()
+      }, null), column.value.resizeable && resizing.value && createVNode("div", {
+        "class": "resize-overlay",
+        "onClick": (e) => e.stopPropagation()
       }, null)])]);
     };
   }
@@ -7595,49 +8093,248 @@ var body = "";
 var TableHeader = defineComponent({
   name: "DTableHeader",
   setup() {
-    const ns = useNamespace("table");
+    const ns2 = 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))]))]);
+      "class": ns2.e("thead")
+    }, [headerRows.value.map((subColumns) => createVNode("tr", null, [subColumns.map((column, columnIndex) => {
+      return createVNode(TH, {
+        "key": columnIndex,
+        "column": column,
+        "colspan": column.colSpan,
+        "rowspan": column.rowSpan
+      }, null);
+    })]))]);
   }
 });
+const bodyTdProps = {
+  column: {
+    type: Object,
+    default: () => ({})
+  },
+  row: {
+    type: Object,
+    default: () => ({})
+  },
+  index: {
+    type: Number,
+    default: 0
+  }
+};
+const tooltipProps = {
+  content: {
+    type: String,
+    default: ""
+  },
+  position: {
+    type: [String, Array],
+    default: "top"
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  mouseEnterDelay: {
+    type: Number,
+    default: 150
+  },
+  mouseLeaveDelay: {
+    type: Number,
+    default: 100
+  },
+  enterable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  hideAfter: {
+    type: Number,
+    default: 0
+  }
+};
+const TransformOriginMap = {
+  top: "50% calc(100% + 8px)",
+  bottom: "50% -8px",
+  left: "calc(100% + 8px)",
+  right: "-8px 50%"
+};
+function useTooltip(origin, props) {
+  const { position, mouseEnterDelay, mouseLeaveDelay, enterable, disabled, hideAfter } = toRefs(props);
+  const visible = ref(false);
+  const isEnter = ref(false);
+  const positionArr = computed(() => typeof position.value === "string" ? [position.value] : position.value);
+  const placement = ref(positionArr.value[0]);
+  const overlayStyles = computed(() => ({
+    transformOrigin: TransformOriginMap[placement.value]
+  }));
+  const enter = lodash.exports.debounce(() => {
+    isEnter.value && (visible.value = true);
+  }, mouseEnterDelay.value);
+  const leave = lodash.exports.debounce(() => {
+    !isEnter.value && (visible.value = false);
+  }, mouseLeaveDelay.value);
+  const onMouseenter = () => {
+    if (disabled.value) {
+      return;
+    }
+    isEnter.value = true;
+    enter();
+  };
+  const onMouseleave = () => {
+    isEnter.value = false;
+    leave();
+  };
+  const onPositionChange = (pos) => {
+    placement.value = pos;
+  };
+  const quickLeave = () => {
+    isEnter.value = false;
+    visible.value = false;
+  };
+  const onMouseenterOverlay = () => {
+    if (!enterable.value) {
+      quickLeave();
+    } else {
+      onMouseenter();
+    }
+  };
+  onMounted(() => {
+    origin.value.addEventListener("mouseenter", onMouseenter);
+    origin.value.addEventListener("mouseleave", onMouseleave);
+  });
+  let timer;
+  watch(visible, (newVal) => {
+    if (newVal && hideAfter.value) {
+      timer && clearTimeout(timer);
+      timer = setTimeout(quickLeave, hideAfter.value);
+    }
+  });
+  return { visible, placement, positionArr, overlayStyles, onPositionChange, onMouseenter, onMouseleave, onMouseenterOverlay };
+}
+var tooltip = "";
+var Tooltip = defineComponent({
+  name: "DTooltip",
+  props: tooltipProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      showAnimation,
+      content
+    } = toRefs(props);
+    const origin = ref();
+    const tooltipRef = ref();
+    const {
+      visible,
+      placement,
+      positionArr,
+      overlayStyles,
+      onPositionChange,
+      onMouseleave,
+      onMouseenterOverlay
+    } = useTooltip(origin, props);
+    const ns2 = useNamespace("tooltip");
+    provide(POPPER_TRIGGER_TOKEN, origin);
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
+      }, {
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "ref": tooltipRef,
+          "class": ns2.b(),
+          "origin": origin.value,
+          "position": positionArr.value,
+          "offset": 6,
+          "show-arrow": true,
+          "style": overlayStyles.value,
+          "onPositionChange": onPositionChange,
+          "onMouseenter": onMouseenterOverlay,
+          "onMouseleave": onMouseleave
+        }, {
+          default: () => [createVNode("span", {
+            "innerHTML": content.value
+          }, null)]
+        })]
+      })]
+    })]);
+  }
+});
+function useBodyTd(props) {
+  const tooltipContent = ref();
+  const isShowTooltip = ref(false);
+  const tdRef = ref();
+  let observer;
+  function getTooltipContent() {
+    var _a, _b;
+    return ((_a = tdRef.value) == null ? void 0 : _a.innerText) || ((_b = tdRef.value) == null ? void 0 : _b.textContent);
+  }
+  function shouldShowTooltip() {
+    if (!tdRef.value) {
+      return;
+    }
+    const range = document.createRange();
+    range.setStart(tdRef.value, 0);
+    range.setEnd(tdRef.value, tdRef.value.childNodes.length);
+    const rangeWidth = range.getBoundingClientRect().width;
+    const padding = parseInt(window.getComputedStyle(tdRef.value)["paddingLeft"], 10) + parseInt(window.getComputedStyle(tdRef.value)["paddingRight"], 10);
+    isShowTooltip.value = props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth;
+  }
+  onMounted(() => {
+    if (inBrowser && window.ResizeObserver && props.column.showOverflowTooltip) {
+      const observer2 = new window.ResizeObserver(shouldShowTooltip);
+      tdRef.value && observer2.observe(tdRef.value);
+    }
+    tooltipContent.value = getTooltipContent();
+  });
+  onBeforeMount(() => {
+    tdRef.value && observer.unobserve(tdRef.value);
+  });
+  return { tdRef, isShowTooltip, tooltipContent };
+}
 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);
+  inheritAttrs: false,
+  props: bodyTdProps,
+  setup(props, ctx) {
     const column = toRef(props, "column");
+    const table2 = inject(TABLE_TOKEN);
     const {
       stickyClass,
       stickyStyle
     } = useFixedColumn(column);
+    const {
+      tdRef,
+      isShowTooltip,
+      tooltipContent
+    } = useBodyTd(props);
     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)]);
+      return createVNode(Tooltip, {
+        "content": tooltipContent.value,
+        "disabled": !isShowTooltip.value
+      }, {
+        default: () => {
+          var _a, _b;
+          return [createVNode("td", mergeProps({
+            "ref": tdRef,
+            "class": stickyClass.value,
+            "style": stickyStyle.value
+          }, ctx.attrs), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index)])];
+        }
+      });
     };
   }
 });
@@ -7701,35 +8398,56 @@ var TableBody = defineComponent({
       _data: data,
       flatColumns
     } = table2.store.states;
-    const ns = useNamespace("table");
+    const ns2 = useNamespace("table");
     const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
     const {
       tableSpans,
       removeCells
     } = useMergeCell();
+    const onCellClick = (cellClickArg) => {
+      table2.emit("cell-click", cellClickArg);
+    };
     return () => createVNode("tbody", {
-      "class": ns.e("tbody")
+      "class": ns2.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);
-      })]);
+      const tableRow = () => {
+        return createVNode("tr", {
+          "key": rowIndex,
+          "class": {
+            "hover-enabled": hoverEnabled.value,
+            "expanded": table2.store.isRowExpanded(row)
+          }
+        }, [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,
+            "onClick": () => onCellClick({
+              rowIndex,
+              columnIndex,
+              column,
+              row
+            })
+          }, null);
+        })]);
+      };
+      const expandedRow = () => {
+        var _a, _b, _c, _d;
+        return flatColumns.value.some((column) => column.type === "expand") && createVNode("tr", null, [createVNode("td", {
+          "colspan": flatColumns.value.length
+        }, [(_d = (_c = (_b = (_a = flatColumns.value.filter((column) => column.type === "expand")) == null ? void 0 : _a[0]) == null ? void 0 : _b.slots) == null ? void 0 : _c.default) == null ? void 0 : _d.call(_c, {
+          row
+        })])]);
+      };
+      return createVNode(Fragment, null, [tableRow(), table2.store.isRowExpanded(row) && expandedRow()]);
     })]);
   }
 });
@@ -7744,26 +8462,26 @@ var FixHeader = defineComponent({
     }
   },
   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)])])]);
-    };
+    const ns2 = useNamespace("table");
+    const table2 = inject(TABLE_TOKEN, void 0);
+    const showHeader = computed(() => Boolean(table2 == null ? void 0 : table2.props.showHeader));
+    return () => createVNode("div", {
+      "class": ns2.e("fix-header")
+    }, [showHeader.value && 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": ns2.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({
@@ -7777,15 +8495,15 @@ var NormalHeader = defineComponent({
     }
   },
   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)]);
-    };
+    const table2 = inject(TABLE_TOKEN, void 0);
+    const showHeader = computed(() => Boolean(table2 == null ? void 0 : table2.props.showHeader));
+    return () => createVNode("table", {
+      "class": props.classes,
+      "cellpadding": "0",
+      "cellspacing": "0"
+    }, [createVNode(ColGroup, null, null), showHeader.value && createVNode(TableHeader, {
+      "style": "position:relative"
+    }, null), !props.isEmpty && createVNode(TableBody, null, null)]);
   }
 });
 defineComponent(Loading);
@@ -7797,36 +8515,48 @@ var Table = defineComponent({
     dLoading: loadingDirective
   },
   props: TableProps,
-  emits: ["sort-change"],
+  emits: ["sort-change", "cell-click", "check-change", "check-all-change", "expand-change"],
   setup(props, ctx) {
     const table2 = getCurrentInstance();
-    const store = createStore(toRef(props, "data"));
+    const store = createStore(toRef(props, "data"), table2);
     const tableId = `devui-table_${tableIdInit++}`;
+    const tableRef = ref();
     table2.tableId = tableId;
     table2.store = store;
     provide(TABLE_TOKEN, table2);
+    const {
+      tableWidth,
+      updateColumnWidth
+    } = useTableLayout(table2);
     const {
       classes,
-      style
-    } = useTable(props);
+      styles
+    } = useTable(props, tableWidth);
     const isEmpty2 = computed(() => props.data.length === 0);
-    const ns = useNamespace("table");
+    const ns2 = useNamespace("table");
     const hiddenColumns = ref(null);
     table2.hiddenColumns = hiddenColumns;
+    table2.tableRef = tableRef;
+    table2.updateColumnWidth = updateColumnWidth;
     ctx.expose({
       getCheckedRows() {
         return store.getCheckedRows();
+      },
+      expandAllRows() {
+        store.expandAllRows();
       }
     });
     onMounted(async () => {
       await nextTick();
       store.updateColumns();
+      updateColumnWidth();
     });
     return () => {
       var _a, _b;
       return withDirectives(createVNode("div", {
-        "class": ns.b(),
-        "style": style.value
+        "ref": tableRef,
+        "class": ns2.b(),
+        "style": styles.value
       }, [createVNode("div", {
         "ref": hiddenColumns,
         "class": "hidden-columns"
@@ -7837,8 +8567,8 @@ var Table = defineComponent({
         "classes": classes.value,
         "is-empty": isEmpty2.value
       }, null), isEmpty2.value && createVNode("div", {
-        "class": ns.e("empty")
-      }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
+        "class": ns2.e("empty")
+      }, [ctx.slots.empty ? ctx.slots.empty() : props.empty])]), [[resolveDirective("dLoading"), props.showLoading]]);
     };
   }
 });
@@ -7860,7 +8590,11 @@ const tableColumnProps = {
   },
   minWidth: {
     type: [String, Number],
-    default: 80
+    default: ""
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: ""
   },
   formatter: {
     type: Function
@@ -7897,16 +8631,35 @@ const tableColumnProps = {
   },
   fixedRight: {
     type: String
+  },
+  align: {
+    type: String,
+    default: "left"
+  },
+  showOverflowTooltip: {
+    type: Boolean,
+    default: false
+  },
+  checkable: {
+    type: Function
+  },
+  resizeable: {
+    type: Boolean,
+    default: false
+  },
+  reserveCheck: {
+    type: Boolean,
+    default: false
   }
 };
 function formatWidth(width) {
+  if (width === "") {
+    return width;
+  }
   if (typeof width === "number") {
     return width;
   }
-  return parseInt(width, 10) || 0;
-}
-function formatMinWidth(minWidth) {
-  return formatWidth(minWidth) || 80;
+  return parseInt(width, 10) || 80;
 }
 const cellMap = {
   checkable: {
@@ -7916,14 +8669,16 @@ const cellMap = {
         halfchecked: store.states._halfChecked.value,
         onChange: (val) => {
           store.states._checkAll.value = val;
+          store._table.emit("check-all-change", val);
         }
       });
     },
     renderCell(rowData, column, store, rowIndex) {
       return h(Checkbox, {
-        modelValue: store.states._checkList.value[rowIndex],
+        modelValue: store.isRowChecked(rowData),
         onChange: (val) => {
-          store.states._checkList.value[rowIndex] = val;
+          store.checkRow(val, rowData);
+          store._table.emit("check-change", val, store.states._data.value[rowIndex]);
         }
       });
     }
@@ -7939,6 +8694,21 @@ const cellMap = {
       return rowIndex + 1;
     }
   },
+  expand: {
+    renderHeader() {
+      return createVNode("span", null, null);
+    },
+    renderCell(rowData, column, store, rowIndex) {
+      return createVNode(Icon, {
+        "name": "chevron-right",
+        "class": "icon-expand-row",
+        "onClick": () => {
+          store.toggleRow(rowData);
+          store._table.emit("expand-change", rowData, store.getExpandedRows());
+        }
+      }, null);
+    }
+  },
   default: {
     renderHeader(column) {
       var _a;
@@ -7956,7 +8726,7 @@ const cellMap = {
     }
   }
 };
-function createColumn(props, slots) {
+function createColumn(id, props, ctx) {
   const {
     type,
     field,
@@ -7965,6 +8735,7 @@ function createColumn(props, slots) {
     sortDirection,
     width,
     minWidth,
+    maxWidth,
     formatter,
     sortMethod,
     filterable,
@@ -7972,19 +8743,22 @@ function createColumn(props, slots) {
     filterMultiple,
     order,
     fixedLeft,
-    fixedRight
+    fixedRight,
+    align,
+    showOverflowTooltip,
+    resizeable
   } = props;
-  const column = reactive({});
+  const column = reactive({ id });
   column.type = type.value;
   function renderHeader(columnItem, store) {
-    if (slots.header) {
-      return slots.header(columnItem);
+    if (ctx.slots.header) {
+      return ctx.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 });
+    if (ctx.slots.default && columnItem.type !== "expand") {
+      return ctx.slots.default({ row: rowData, rowIndex });
     }
     return cellMap[type.value || "default"].renderCell(rowData, columnItem, store, rowIndex);
   }
@@ -8007,17 +8781,29 @@ function createColumn(props, slots) {
     column.fixedLeft = left;
     column.fixedRight = right;
   }, { immediate: true });
-  watch([width, minWidth], ([widthVal, minWidthVal]) => {
+  watch(align, (alignVal) => {
+    column.align = alignVal;
+  }, { immediate: true });
+  watch(showOverflowTooltip, (showVal) => {
+    column.showOverflowTooltip = showVal;
+  }, { immediate: true });
+  watch(resizeable, (resizeVal) => {
+    column.resizeable = resizeVal;
+  }, { immediate: true });
+  watch([width, minWidth, maxWidth], ([widthVal, minWidthVal, maxWidthVal]) => {
     column.width = formatWidth(widthVal);
-    column.minWidth = formatMinWidth(minWidthVal);
-    column.realWidth = column.width || column.minWidth;
-  });
+    column.minWidth = minWidthVal;
+    column.maxWidth = maxWidthVal;
+    column.realWidth = column.width;
+  }, { immediate: true });
   onBeforeMount(() => {
+    column.id = id;
     column.renderHeader = renderHeader;
     column.renderCell = renderCell;
     column.formatter = formatter == null ? void 0 : formatter.value;
-    column.customFilterTemplate = slots.customFilterTemplate;
-    column.subColumns = slots.subColumns;
+    column.customFilterTemplate = ctx.slots.customFilterTemplate;
+    column.subColumns = ctx.slots.subColumns;
+    column.slots = ctx.slots;
   });
   return column;
 }
@@ -8039,29 +8825,35 @@ let columnIdInit = 1;
 var Column = defineComponent({
   name: "DColumn",
   props: tableColumnProps,
-  emits: ["filter-change"],
+  emits: ["filter-change", "resize-start", "resizing", "resize-end"],
   setup(props, ctx) {
-    const instance = getCurrentInstance();
-    const column = createColumn(toRefs(props), ctx.slots);
+    toRefs(props);
     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;
+    const instance = getCurrentInstance();
+    instance.columnId = `${parent.tableId || parent.columnId}_column_${columnIdInit++}`;
+    const column = createColumn(instance.columnId, toRefs(props), ctx);
+    instance.columnConfig = column;
     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));
+      if (typeof props.checkable === "function") {
+        for (const [rowIndex, row] of owner == null ? void 0 : owner.store.states._data.value.entries()) {
+          if (props.checkable(row, rowIndex)) {
+            owner.store.checkRow(true, row);
+          }
+        }
+      }
     });
     watch(() => column.order, () => {
       owner == null ? void 0 : owner.store.sortColumn();
@@ -8069,30 +8861,15 @@ var Column = defineComponent({
     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, {
+    return () => {
+      var _a, _b;
+      const defaultSlot = (_b = (_a = ctx.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", []);
-    }
+      return createVNode("div", null, [Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
+    };
   }
 });
 var index = {