@dao-style/core 0.0.1-beta.12 → 0.0.1-beta.15

package/dist/dao-style.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, unref, resolveComponent, Fragment, createBlock, createTextVNode, toDisplayString, ref, inject, watchEffect, mergeProps, provide, toRefs, createVNode, withCtx, watch, Transition, withModifiers, normalizeStyle, withDirectives, vShow, withKeys, getCurrentInstance, onMounted, onBeforeUnmount, Teleport, nextTick, reactive, renderList, vModelText, toRef, onUnmounted, h } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, unref, resolveComponent, Fragment, createBlock, createTextVNode, toDisplayString, ref, inject, watchEffect, mergeProps, provide, readonly, toRefs, createVNode, withCtx, watch, Transition, withModifiers, normalizeStyle, withDirectives, vShow, withKeys, getCurrentInstance, onMounted, onBeforeUnmount, Teleport, nextTick, reactive, renderList, getCurrentScope, onScopeDispose, vModelText, onUnmounted, h } from "vue";
 import { isArray, isSet, looseIndexOf, looseEqual, isFunction, NOOP } from "@vue/shared";
 var actionIcon_vue_vue_type_style_index_0_lang = "";
 var _export_sfc = (sfc, props) => {
@@ -55,7 +55,7 @@ const _sfc_main$I = defineComponent({
     };
   }
 });
-const _hoisted_1$x = ["disabled"];
+const _hoisted_1$w = ["disabled"];
 function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
     class: normalizeClass(["dao-action-icon", `dao-action-icon--type-${_ctx.type}`]),
@@ -68,7 +68,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["dao-action-icon__iconfont", _ctx.name])
       }, null, 2)) : createCommentVNode("", true)
     ])
-  ], 10, _hoisted_1$x);
+  ], 10, _hoisted_1$w);
 }
 var DaoActionIcon = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$F]]);
 const BUTTON_TYPES = ["primary", "secondary", "tertiary", "ghost", "danger"];
@@ -122,7 +122,7 @@ const _sfc_main$H = defineComponent({
     }
   }
 });
-const _hoisted_1$w = {
+const _hoisted_1$v = {
   key: 1,
   class: "dao-icon dao-svg-icon"
 };
@@ -131,7 +131,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.useFont ? (openBlock(), createElementBlock("i", {
     key: 0,
     class: normalizeClass(["dao-icon dao-iconfont", _ctx.name])
-  }, null, 2)) : (openBlock(), createElementBlock("svg", _hoisted_1$w, [
+  }, null, 2)) : (openBlock(), createElementBlock("svg", _hoisted_1$v, [
     createElementVNode("use", {
       "xlink:href": `#${_ctx.name}`
     }, null, 8, _hoisted_2$l)
@@ -234,7 +234,7 @@ const _sfc_main$G = defineComponent({
     };
   }
 });
-const _hoisted_1$v = ["disabled"];
+const _hoisted_1$u = ["disabled"];
 const _hoisted_2$k = {
   key: 1,
   class: "dao-btn__text"
@@ -263,16 +263,16 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
         name: _ctx.realIconRight
       }, null, 8, ["class", "use-font", "name"])) : createCommentVNode("", true)
     ], 64))
-  ], 10, _hoisted_1$v);
+  ], 10, _hoisted_1$u);
 }
 var DaoButton = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$D]]);
 var buttonGroup_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$F = defineComponent({
   name: "DaoButtonGroup"
 });
-const _hoisted_1$u = { class: "dao-btn-group" };
+const _hoisted_1$t = { class: "dao-btn-group" };
 function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$u, [
+  return openBlock(), createElementBlock("div", _hoisted_1$t, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -306,7 +306,7 @@ const _sfc_main$E = defineComponent({
     }
   }
 });
-const _hoisted_1$t = {
+const _hoisted_1$s = {
   key: 0,
   class: "dao-card-header"
 };
@@ -314,14 +314,14 @@ const _hoisted_2$j = {
   key: 0,
   class: "dao-card-header-item"
 };
-const _hoisted_3$d = { class: "dao-card-header-item dao-card-header-title" };
-const _hoisted_4$c = { class: "dao-card-header-item dao-card-header-action" };
+const _hoisted_3$c = { class: "dao-card-header-item dao-card-header-title" };
+const _hoisted_4$a = { class: "dao-card-header-item dao-card-header-action" };
 function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_icon = resolveComponent("dao-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["dao-card", `dao-card--${_ctx.type}`])
   }, [
-    _ctx.type !== "headless" ? (openBlock(), createElementBlock("div", _hoisted_1$t, [
+    _ctx.type !== "headless" ? (openBlock(), createElementBlock("div", _hoisted_1$s, [
       renderSlot(_ctx.$slots, "header", {}, () => [
         renderSlot(_ctx.$slots, "header-prefix"),
         _ctx.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
@@ -334,12 +334,12 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
             }, null, 8, ["name", "use-font"])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$d, [
+        createElementVNode("div", _hoisted_3$c, [
           renderSlot(_ctx.$slots, "title", {}, () => [
             createTextVNode(toDisplayString(_ctx.title), 1)
           ])
         ]),
-        createElementVNode("div", _hoisted_4$c, [
+        createElementVNode("div", _hoisted_4$a, [
           renderSlot(_ctx.$slots, "action")
         ]),
         renderSlot(_ctx.$slots, "header-suffix")
@@ -366,9 +366,9 @@ var cardItem_scss_vue_type_style_index_0_src_lang = "";
 const _sfc_main$D = defineComponent({
   name: "DaoCardItem"
 });
-const _hoisted_1$s = { class: "dao-card-item" };
+const _hoisted_1$r = { class: "dao-card-item" };
 function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$s, [
+  return openBlock(), createElementBlock("div", _hoisted_1$r, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -407,7 +407,15 @@ const breadcrumbKey = Symbol("breadcrumbKey");
 const ToggleItemKey = Symbol("toggleItem");
 const ExpansionStateKey = Symbol("expansionProps");
 var checkbox_vue_vue_type_style_index_0_lang = "";
-const modelValueAny = [String, Number, Boolean, Symbol, Object, Set, Array];
+const modelValueAny = [String, Number, Boolean, BigInt, Symbol, Object, Set, Array];
+function getUnrefItem(set, item) {
+  const tempArray = Array.from(set);
+  const index2 = looseIndexOf(tempArray, item);
+  return {
+    unrefItem: tempArray[index2],
+    index: index2
+  };
+}
 const _sfc_main$C = defineComponent({
   name: "DaoCheckbox",
   props: {
@@ -462,7 +470,8 @@ const _sfc_main$C = defineComponent({
         if (isArray(modelValue)) {
           currentChecked.value = looseIndexOf(modelValue, value) > -1;
         } else if (isSet(modelValue)) {
-          currentChecked.value = modelValue.has(value);
+          const { index: index2 } = getUnrefItem(modelValue, value);
+          currentChecked.value = index2 > -1;
         } else {
           currentChecked.value = looseEqual(modelValue, trueValue);
         }
@@ -517,7 +526,13 @@ const _sfc_main$C = defineComponent({
         if (checked) {
           cloned.add(value);
         } else {
-          cloned.delete(value);
+          const {
+            unrefItem,
+            index: index2
+          } = getUnrefItem(modelValue, value);
+          if (index2 > -1) {
+            cloned.delete(unrefItem);
+          }
         }
         emitModelValue(cloned, event);
       } else {
@@ -541,13 +556,13 @@ const _sfc_main$C = defineComponent({
     }
   }
 });
-const _hoisted_1$r = ["disabled", "indeterminate", "checked"];
+const _hoisted_1$q = ["disabled", "indeterminate", "checked"];
 const _hoisted_2$i = /* @__PURE__ */ createElementVNode("span", { class: "dao-checkbox-inner" }, null, -1);
-const _hoisted_3$c = {
+const _hoisted_3$b = {
   key: 0,
   class: "dao-checkbox__label"
 };
-const _hoisted_4$b = {
+const _hoisted_4$9 = {
   key: 0,
   class: "dao-checkbox__label-text"
 };
@@ -570,11 +585,11 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
       }, _ctx.$attrs, {
         checked: _ctx.currentChecked,
         onChange: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args))
-      }), null, 16, _hoisted_1$r),
+      }), null, 16, _hoisted_1$q),
       _hoisted_2$i
     ], 2),
-    _ctx.hasLabel ? (openBlock(), createElementBlock("span", _hoisted_3$c, [
-      _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_4$b, [
+    _ctx.hasLabel ? (openBlock(), createElementBlock("span", _hoisted_3$b, [
+      _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_4$9, [
         renderSlot(_ctx.$slots, "default")
       ])) : createCommentVNode("", true),
       _ctx.hasHelper ? (openBlock(), createElementBlock("span", _hoisted_5$7, [
@@ -606,7 +621,7 @@ const _sfc_main$B = defineComponent({
       props.vertical ? "dao-checkbox-group--vertical" : "dao-checkbox-group--horizontal"
     ]);
     if (isArray(props.modelValue) || isSet(props.modelValue)) {
-      provide(checkboxGroupModelValueKey, computed(() => props.modelValue));
+      provide(checkboxGroupModelValueKey, readonly(computed(() => props.modelValue)));
     }
     const updateGroupModelValueFn = (modelValue) => {
       emit("update:modelValue", modelValue);
@@ -652,10 +667,10 @@ const _sfc_main$A = defineComponent({
     };
   }
 });
-const _hoisted_1$q = { class: "dao-dialog-header" };
+const _hoisted_1$p = { class: "dao-dialog__header" };
 function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_button = resolveComponent("dao-button");
-  return openBlock(), createElementBlock("div", _hoisted_1$q, [
+  return openBlock(), createElementBlock("div", _hoisted_1$p, [
     renderSlot(_ctx.$slots, "default", {}, () => [
       createElementVNode("span", null, [
         renderSlot(_ctx.$slots, "title", {}, () => [
@@ -709,14 +724,14 @@ const _sfc_main$z = defineComponent({
     };
   }
 });
-const _hoisted_1$p = { class: "dao-dialog-footer" };
+const _hoisted_1$o = { class: "dao-dialog__footer" };
 function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_button = resolveComponent("dao-button");
-  return openBlock(), createElementBlock("div", _hoisted_1$p, [
+  return openBlock(), createElementBlock("div", _hoisted_1$o, [
     renderSlot(_ctx.$slots, "default", {}, () => [
       createVNode(_component_dao_button, {
         type: "ghost",
-        class: "dao-dialog-footer-cancel-btn",
+        class: "dao-dialog__footer__cancel-btn",
         onClick: _ctx.onCancel
       }, {
         default: withCtx(() => [
@@ -739,7 +754,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var DialogFooter = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$w]]);
 var dialog_scss_vue_type_style_index_0_src_lang = "";
-const DIALOG_NUM_ATTR = "dao-dialog-num";
+const DIALOG_NUM_ATTR = "dao-dialog__num";
 const DIALOG_MINIMUM_PADDING = "20px";
 const DIALOG_DEFAULT_PADDING_TOP = "100px";
 const DIALOG_DEFAULT_PADDING_BOTTOM = "20px";
@@ -838,7 +853,7 @@ const _sfc_main$y = defineComponent({
     const computedPaddingBottom = computed(() => middle.value ? DIALOG_MINIMUM_PADDING : bottom2.value);
     const computedContainerClass = computed(() => [
       containerClass.value,
-      `dao-dialog__size-${size.value}`
+      `dao-dialog--size-${size.value}`
     ]);
     const showHeader = computed(() => typeof header2.value === "boolean" ? header2.value : true);
     const headerTitle = computed(() => typeof header2.value === "string" ? header2.value : "");
@@ -918,7 +933,7 @@ const _sfc_main$y = defineComponent({
     };
   }
 });
-const _hoisted_1$o = { class: "dao-dialog-body" };
+const _hoisted_1$n = { class: "dao-dialog__body" };
 function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dialog_header = resolveComponent("dialog-header");
   const _component_dialog_footer = resolveComponent("dialog-footer");
@@ -933,11 +948,11 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [
       _ctx.modelValue ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["dao-dialog-backdrop", { middle: _ctx.middle }]),
+        class: normalizeClass(["dao-dialog__backdrop", { "dao-dialog__backdrop--middle": _ctx.middle }]),
         onMousedown: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onWrapperMousedown && _ctx.onWrapperMousedown(...args), ["self"]))
       }, [
         createElementVNode("div", {
-          class: normalizeClass(["dao-dialog-container", _ctx.computedContainerClass]),
+          class: normalizeClass(["dao-dialog__container", _ctx.computedContainerClass]),
           style: normalizeStyle({
             "margin-top": _ctx.computedPaddingTop,
             "margin-bottom": _ctx.computedPaddingBottom
@@ -954,7 +969,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 3
           }, 8, ["title", "show-close", "onClose"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_1$o, [
+          createElementVNode("div", _hoisted_1$n, [
             renderSlot(_ctx.$slots, "default")
           ]),
           _ctx.footer ? (openBlock(), createBlock(_component_dialog_footer, {
@@ -1053,7 +1068,7 @@ const _sfc_main$x = defineComponent({
     DaoActionIcon
   },
   props: drawerProps,
-  emits: ["close", "confirm"],
+  emits: ["update:modelValue", "close", "confirm"],
   setup(props, { emit }) {
     const { modelValue, size } = toRefs(props);
     const visible = ref(false);
@@ -1089,6 +1104,7 @@ const _sfc_main$x = defineComponent({
     };
     const close = () => {
       visible.value = false;
+      emit("update:modelValue", false);
       emit("close");
     };
     const handleWrapClick = (event) => {
@@ -1109,6 +1125,7 @@ const _sfc_main$x = defineComponent({
     };
     const confirm = () => {
       visible.value = false;
+      emit("update:modelValue", false);
       emit("confirm");
     };
     const setLastFocusElement = () => {
@@ -1152,13 +1169,13 @@ const _sfc_main$x = defineComponent({
     };
   }
 });
-const _hoisted_1$n = { class: "dao-drawer__content" };
+const _hoisted_1$m = { class: "dao-drawer__content" };
 const _hoisted_2$h = {
   key: 0,
   class: "dao-drawer__header"
 };
-const _hoisted_3$b = { class: "dao-drawer__header-group" };
-const _hoisted_4$a = { class: "dao-drawer__body" };
+const _hoisted_3$a = { class: "dao-drawer__header-group" };
+const _hoisted_4$8 = { class: "dao-drawer__body" };
 const _hoisted_5$6 = {
   key: 1,
   class: "dao-drawer__footer"
@@ -1196,10 +1213,10 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
           withDirectives(createElementVNode("div", {
             class: normalizeClass(_ctx.contentClassList)
           }, [
-            createElementVNode("div", _hoisted_1$n, [
+            createElementVNode("div", _hoisted_1$m, [
               !_ctx.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
-                  createElementVNode("div", _hoisted_3$b, [
+                  createElementVNode("div", _hoisted_3$a, [
                     createElementVNode("span", null, toDisplayString(_ctx.title), 1),
                     !_ctx.hideCloseIcon ? (openBlock(), createBlock(_component_dao_action_icon, {
                       key: 0,
@@ -1209,7 +1226,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
                   ])
                 ])
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_4$a, [
+              createElementVNode("div", _hoisted_4$8, [
                 renderSlot(_ctx.$slots, "default")
               ]),
               !_ctx.hideFooter ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
@@ -2494,12 +2511,12 @@ const _sfc_main$w = defineComponent({
     };
   }
 });
-const _hoisted_1$m = ["id", "aria-hidden", "tabindex"];
+const _hoisted_1$l = ["id", "aria-hidden", "tabindex"];
 const _hoisted_2$g = {
   ref: "arrow",
   class: "dao-popper-arrow"
 };
-const _hoisted_3$a = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_3$9 = /* @__PURE__ */ createElementVNode("svg", {
   class: "dao-popper-arrow-viewbox",
   viewBox: "0 0 15 15"
 }, [
@@ -2513,8 +2530,8 @@ const _hoisted_3$a = /* @__PURE__ */ createElementVNode("svg", {
     d: "M6 7.5L15 -1L15 16Z"
   })
 ], -1);
-const _hoisted_4$9 = [
-  _hoisted_3$a
+const _hoisted_4$7 = [
+  _hoisted_3$9
 ];
 function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
@@ -2535,10 +2552,10 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 4),
-    withDirectives(createElementVNode("div", _hoisted_2$g, _hoisted_4$9, 512), [
+    withDirectives(createElementVNode("div", _hoisted_2$g, _hoisted_4$7, 512), [
       [vShow, _ctx.visibleArrow]
     ])
-  ], 42, _hoisted_1$m);
+  ], 42, _hoisted_1$l);
 }
 var PopperContent = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$t]]);
 var PopperProps = {
@@ -2552,7 +2569,7 @@ var PopperProps = {
   },
   appendTo: {
     type: [String, Boolean, Object],
-    default: "body"
+    default: "root"
   },
   boundary: {
     type: [String, Object],
@@ -2620,16 +2637,32 @@ function updatePopperOptions(popperInstance, modifiers, popperOptions = {}) {
     _modifiers = [modifiers];
   }
   popperInstance.setOptions((options) => {
-    var _a, _b;
+    var _a2, _b2;
     return __spreadProps(__spreadValues(__spreadValues({}, options), popperOptions), {
       modifiers: [
-        ...(_a = options.modifiers) != null ? _a : [],
-        ...(_b = popperOptions.modifiers) != null ? _b : [],
+        ...(_a2 = options.modifiers) != null ? _a2 : [],
+        ...(_b2 = popperOptions.modifiers) != null ? _b2 : [],
         ..._modifiers
       ]
     });
   });
 }
+function getActualRoot(app) {
+  var _a2, _b2, _c, _d, _e, _f, _g, _h;
+  let internalRoot = "body";
+  if (!app) {
+    return internalRoot;
+  }
+  let ele = (_f = (_c = (_b2 = (_a2 = app == null ? void 0 : app.root) == null ? void 0 : _a2.appContext) == null ? void 0 : _b2.app) == null ? void 0 : _c._container) != null ? _f : (_e = (_d = app == null ? void 0 : app.root) == null ? void 0 : _d.vnode) == null ? void 0 : _e.el;
+  if ((ele == null ? void 0 : ele.nodeType) !== Node.ELEMENT_NODE && (ele == null ? void 0 : ele.nodeType) !== Node.DOCUMENT_FRAGMENT_NODE && (ele == null ? void 0 : ele.nodeType) !== Node.DOCUMENT_NODE) {
+    ele = ele == null ? void 0 : ele.parentNode;
+  }
+  const rootNode = (_g = ele == null ? void 0 : ele.getRootNode) == null ? void 0 : _g.call(ele);
+  if (rootNode) {
+    internalRoot = (_h = rootNode.body) != null ? _h : rootNode;
+  }
+  return internalRoot;
+}
 const _sfc_main$v = defineComponent({
   name: "DaoPopper",
   components: {
@@ -2657,12 +2690,26 @@ const _sfc_main$v = defineComponent({
     const isOpen = ref(false);
     const actualAppendTo = ref("body");
     const isTelDisabled = ref(false);
-    const unrefAppendTo = unref(appendTo);
-    if (unrefAppendTo === false) {
-      isTelDisabled.value = true;
-    } else {
-      actualAppendTo.value = unrefAppendTo;
-    }
+    watch(appendTo, () => {
+      const unrefAppendTo = unref(appendTo);
+      if (unrefAppendTo === false) {
+        isTelDisabled.value = true;
+      } else if (unrefAppendTo === "root") {
+        const vm = getCurrentInstance();
+        if (vm == null ? void 0 : vm.root.isMounted) {
+          actualAppendTo.value = getActualRoot(vm);
+        } else {
+          isTelDisabled.value = true;
+          actualAppendTo.value = "body";
+          onMounted(() => {
+            actualAppendTo.value = getActualRoot(vm);
+            isTelDisabled.value = false;
+          });
+        }
+      } else {
+        actualAppendTo.value = unrefAppendTo;
+      }
+    }, { immediate: true });
     const instance = getCurrentInstance();
     let popperInstance;
     let _targetNode;
@@ -2670,8 +2717,8 @@ const _sfc_main$v = defineComponent({
     let _arrowNode;
     let _scheduleTimer;
     const themeClass = computed(() => {
-      var _a, _b;
-      return (_b = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$options.daoPopperTheme) != null ? _b : "";
+      var _a2, _b2;
+      return (_b2 = (_a2 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a2.$options.daoPopperTheme) != null ? _b2 : "";
     });
     const showDelay = computed(() => {
       const unrefDelay = unref(delay);
@@ -2688,7 +2735,7 @@ const _sfc_main$v = defineComponent({
       return unrefDelay || 0;
     });
     const createPopper$1 = async () => {
-      var _a;
+      var _a2;
       if (popperInstance == null ? void 0 : popperInstance.destroy) {
         popperInstance.destroy();
       }
@@ -2729,7 +2776,7 @@ const _sfc_main$v = defineComponent({
           }
         });
       }
-      modifiers.push(...((_a = unref(popperOptions)) == null ? void 0 : _a.modifiers) || []);
+      modifiers.push(...((_a2 = unref(popperOptions)) == null ? void 0 : _a2.modifiers) || []);
       const ppOptions = __spreadProps(__spreadValues({
         strategy: "fixed",
         placement: unref(placement)
@@ -2855,10 +2902,10 @@ const _sfc_main$v = defineComponent({
             fn2(_popperNode, "mouseleave", hide);
             break;
           case "focus":
-            fn2(_targetNode, "focus", show);
-            fn2(_popperNode, "focus", show);
-            fn2(_targetNode, "blur", hide);
-            fn2(_popperNode, "blur", hide);
+            fn2(_targetNode, "focusin", show);
+            fn2(_popperNode, "focusin", show);
+            fn2(_targetNode, "focusout", hide);
+            fn2(_popperNode, "focusout", hide);
             break;
         }
       });
@@ -2870,12 +2917,12 @@ const _sfc_main$v = defineComponent({
       operateEventListeners(off);
     };
     const init = () => {
-      var _a, _b, _c, _d;
+      var _a2, _b2, _c, _d;
       if (!slots.default) {
         throw new Error("Trigger must be provided");
       }
-      _targetNode = (_a = unref(reference2)) == null ? void 0 : _a.firstElementChild;
-      _popperNode = (_b = unref(popper2)) == null ? void 0 : _b.$el;
+      _targetNode = (_a2 = unref(reference2)) == null ? void 0 : _a2.firstElementChild;
+      _popperNode = (_b2 = unref(popper2)) == null ? void 0 : _b2.$el;
       _arrowNode = (_d = (_c = unref(popper2)) == null ? void 0 : _c.$refs) == null ? void 0 : _d.arrow;
       addEventListeners();
       if (unref(isOpen) || unref(modelValue)) {
@@ -3043,7 +3090,7 @@ const _sfc_main$u = defineComponent({
     },
     appendTo: {
       type: [String, Boolean, Object],
-      default: "body"
+      default: "root"
     },
     placement: {
       type: String,
@@ -3069,11 +3116,11 @@ const _sfc_main$u = defineComponent({
     const realOffset = computed(() => realTrigger.value === "hover" ? 0 : offset2.value);
     const parentHideFn = inject("hide", NOOP);
     const hide = () => {
-      var _a;
+      var _a2;
       if (realTrigger.value === "manual") {
         return;
       }
-      (_a = popper2.value) == null ? void 0 : _a.hide();
+      (_a2 = popper2.value) == null ? void 0 : _a2.hide();
       parentHideFn == null ? void 0 : parentHideFn();
     };
     provide("hide", hide);
@@ -3086,7 +3133,7 @@ const _sfc_main$u = defineComponent({
     };
   }
 });
-const _hoisted_1$l = { tabindex: "0" };
+const _hoisted_1$k = { tabindex: "0" };
 function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_popper = resolveComponent("dao-popper");
   return openBlock(), createBlock(_component_dao_popper, {
@@ -3097,13 +3144,14 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
     "popper-class": "dao-dropdown-menu-popper",
     "visible-arrow": false,
     offset: _ctx.realOffset,
-    "model-value": _ctx.visible
+    "model-value": _ctx.visible,
+    transition: "dao-fade-slide-default"
   }, {
     content: withCtx(() => [
       renderSlot(_ctx.$slots, "menu")
     ]),
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1$l, [
+      createElementVNode("div", _hoisted_1$k, [
         renderSlot(_ctx.$slots, "default")
       ])
     ]),
@@ -3115,9 +3163,9 @@ var dropdownMenu_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$t = defineComponent({
   name: "DaoDropdownMenu"
 });
-const _hoisted_1$k = { class: "dao-dropdown-menu" };
+const _hoisted_1$j = { class: "dao-dropdown-menu" };
 function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("ul", _hoisted_1$k, [
+  return openBlock(), createElementBlock("ul", _hoisted_1$j, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -3272,9 +3320,9 @@ const _sfc_main$r = defineComponent({
     };
   }
 });
-const _hoisted_1$j = { class: "dao-expansion" };
+const _hoisted_1$i = { class: "dao-expansion" };
 function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$j, [
+  return openBlock(), createElementBlock("div", _hoisted_1$i, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -3355,10 +3403,10 @@ const _sfc_main$q = defineComponent({
     };
   }
 });
-const _hoisted_1$i = { class: "dao-expansion-item-icon-container" };
+const _hoisted_1$h = { class: "dao-expansion-item-icon-container" };
 const _hoisted_2$f = { class: "dao-expansion-item-title-container" };
-const _hoisted_3$9 = { class: "dao-expansion-item-title dao-exp-ellipsis" };
-const _hoisted_4$8 = { class: "dao-expansion-item-description dao-exp-ellipsis" };
+const _hoisted_3$8 = { class: "dao-expansion-item-title dao-exp-ellipsis" };
+const _hoisted_4$6 = { class: "dao-expansion-item-description dao-exp-ellipsis" };
 const _hoisted_5$5 = { class: "dao-expansion-item-content-container" };
 const _hoisted_6$3 = { class: "dao-expansion-item-content" };
 function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
@@ -3372,7 +3420,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
       class: "dao-expansion-item-header",
       onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onItemClick && _ctx.onItemClick(...args))
     }, [
-      createElementVNode("div", _hoisted_1$i, [
+      createElementVNode("div", _hoisted_1$h, [
         createVNode(_component_dao_icon, {
           name: "icon-dropdown-line",
           class: "dao-expansion-item-icon",
@@ -3380,12 +3428,12 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
         })
       ]),
       createElementVNode("div", _hoisted_2$f, [
-        createElementVNode("div", _hoisted_3$9, [
+        createElementVNode("div", _hoisted_3$8, [
           renderSlot(_ctx.$slots, "title", {}, () => [
             createTextVNode(toDisplayString(_ctx.title), 1)
           ])
         ]),
-        createElementVNode("div", _hoisted_4$8, [
+        createElementVNode("div", _hoisted_4$6, [
           renderSlot(_ctx.$slots, "description", {}, () => [
             createTextVNode(toDisplayString(_ctx.description), 1)
           ])
@@ -3455,7 +3503,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
         error: "dao-form-item__error-message"
       },
       wrapper: {
+        text: "dao-form-item__text-wrapper",
         radio: "dao-form-item__radio-wrapper",
+        checkbox: "dao-form-item__checkbox-wrapper",
         switch: "dao-form-item__switch-wrapper",
         footer: "dao-form-item__footer-wrapper"
       }
@@ -3486,6 +3536,10 @@ const _sfc_main$n = defineComponent({
       type: String,
       default: ""
     },
+    required: {
+      type: Boolean,
+      default: false
+    },
     paddingTop: {
       type: [Number, String],
       default: 0
@@ -3524,30 +3578,31 @@ const _sfc_main$n = defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "dao-form-item" };
-const _hoisted_2$e = {
+const _hoisted_1$g = {
   key: 0,
   class: "dao-form-item__label-icon-wrapper"
 };
-const _hoisted_3$8 = { class: "dao-form-item__label-icon-label" };
-const _hoisted_4$7 = /* @__PURE__ */ createElementVNode("i", { class: "dao-form-item__label-icon icon-unknow" }, null, -1);
+const _hoisted_2$e = { class: "dao-form-item__label-icon-label" };
+const _hoisted_3$7 = /* @__PURE__ */ createElementVNode("i", { class: "dao-form-item__label-icon icon-unknow" }, null, -1);
 function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_tooltip = resolveComponent("dao-tooltip");
-  return openBlock(), createElementBlock("div", _hoisted_1$h, [
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["dao-form-item", { "is-required": _ctx.required }])
+  }, [
     createElementVNode("div", {
       class: "dao-form-item__label",
       style: normalizeStyle(_ctx.labelStyle)
     }, [
       renderSlot(_ctx.$slots, "label", {}, () => [
         createTextVNode(toDisplayString(!_ctx.iconMessage ? _ctx.label : ""), 1),
-        !!_ctx.iconMessage ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
-          createElementVNode("span", _hoisted_3$8, toDisplayString(_ctx.label), 1),
+        !!_ctx.iconMessage ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+          createElementVNode("span", _hoisted_2$e, toDisplayString(_ctx.label), 1),
           createVNode(_component_dao_tooltip, {
             content: _ctx.iconMessage,
             placement: "top"
           }, {
             default: withCtx(() => [
-              _hoisted_4$7
+              _hoisted_3$7
             ]),
             _: 1
           }, 8, ["content"])
@@ -3560,7 +3615,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 4)
-  ]);
+  ], 2);
 }
 var formItem = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$l]]);
 var formGroup_vue_vue_type_style_index_0_lang = "";
@@ -3573,10 +3628,10 @@ const _sfc_main$m = defineComponent({
     }
   }
 });
-const _hoisted_1$g = { class: "dao-form-group" };
+const _hoisted_1$f = { class: "dao-form-group" };
 const _hoisted_2$d = { class: "dao-form-group__title" };
 function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [
+  return openBlock(), createElementBlock("div", _hoisted_1$f, [
     createElementVNode("div", _hoisted_2$d, [
       renderSlot(_ctx.$slots, "title", {}, () => [
         createTextVNode(toDisplayString(_ctx.title), 1)
@@ -3682,8 +3737,8 @@ const _sfc_main$k = defineComponent({
   setup(props) {
     const parent = inject(breadcrumbKey, null);
     const separator = computed(() => {
-      var _a;
-      return (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.separator;
+      var _a2;
+      return (_a2 = parent == null ? void 0 : parent.props) == null ? void 0 : _a2.separator;
     });
     const handleClick = () => {
       const to = props == null ? void 0 : props.to;
@@ -3748,7 +3803,7 @@ const _sfc_main$j = defineComponent({
   }
 });
 function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  var _a;
+  var _a2;
   const _component_dao_icon = resolveComponent("dao-icon");
   const _component_dao_breadcrumb_item = resolveComponent("dao-breadcrumb-item");
   return openBlock(), createElementBlock("div", {
@@ -3768,7 +3823,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["name"])
       ])
     ], 2)) : createCommentVNode("", true),
-    ((_a = _ctx.list) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.list, (item, index2) => {
+    ((_a2 = _ctx.list) == null ? void 0 : _a2.length) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.list, (item, index2) => {
       return openBlock(), createBlock(_component_dao_breadcrumb_item, {
         key: index2,
         label: item.label,
@@ -3848,6 +3903,9 @@ var inputProps = {
 var input_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$i = defineComponent({
   name: "DaoInput",
+  components: {
+    DaoIcon
+  },
   inheritAttrs: false,
   props: inputProps,
   emits: ["update:modelValue", "input", "change", "blur", "focus", "after-reset"],
@@ -3892,12 +3950,31 @@ const _sfc_main$i = defineComponent({
       `${prefixCls}--size-${size.value}`,
       {
         [`${prefixCls}--search`]: type.value === "search",
+        [`${prefixCls}--password`]: type.value === "password",
         [`${prefixCls}--${status.value}`]: ["error", "success", "loading"].includes(status.value),
         [`${prefixCls}--borderless`]: borderless.value,
         [`${prefixCls}--block`]: block.value,
         [`${prefixCls}--with-append`]: !!append.value
       }
     ]);
+    const isShowPassword = ref(false);
+    const inputType = computed(() => {
+      if (type.value === "password") {
+        if (isShowPassword.value) {
+          return "text";
+        }
+      }
+      return type.value;
+    });
+    function toggleShowPassword() {
+      isShowPassword.value = !isShowPassword.value;
+    }
+    const passwordIcon = computed(() => {
+      if (isShowPassword.value) {
+        return "icon-eye";
+      }
+      return "icon-eye-slash";
+    });
     const statusClasses = computed(() => statusMap[status.value]);
     const setCurrentValue = (val) => {
       if (val === currentValue.value) {
@@ -3918,17 +3995,17 @@ const _sfc_main$i = defineComponent({
       emit("change", val);
     };
     const resetCurrentVal = () => {
-      var _a;
+      var _a2;
       if (disabled.value || type.value !== "search") {
         return;
       }
       updateModel("");
       emit("after-reset");
-      (_a = input2.value) == null ? void 0 : _a.focus();
+      (_a2 = input2.value) == null ? void 0 : _a2.focus();
     };
     const getInputRealNumber = (val, fixedPointNum) => parseFloat(val.toFixed(fixedPointNum));
     const changeNumberValue = (changeType) => {
-      var _a;
+      var _a2;
       if (type.value !== "number") {
         return;
       }
@@ -3957,7 +4034,7 @@ const _sfc_main$i = defineComponent({
         setValue = minimum;
       }
       updateModel(getInputRealNumber(setValue, stepPointNum));
-      (_a = input2.value) == null ? void 0 : _a.focus();
+      (_a2 = input2.value) == null ? void 0 : _a2.focus();
       if (!counterTimeout && !counterInterval) {
         counterTimeout = window.setTimeout(() => {
           counterInterval = window.setInterval(() => changeNumberValue(changeType), 100);
@@ -3965,7 +4042,7 @@ const _sfc_main$i = defineComponent({
       }
     };
     const onInputNumberMouseup = (event) => {
-      var _a;
+      var _a2;
       if (isChangingNumber.value) {
         event.preventDefault();
       }
@@ -3980,7 +4057,7 @@ const _sfc_main$i = defineComponent({
       counterInterval = null;
       isChangingNumber.value = false;
       if (onEvents) {
-        (_a = input2.value) == null ? void 0 : _a.focus();
+        (_a2 = input2.value) == null ? void 0 : _a2.focus();
       }
     };
     const inputAttrs = computed(() => {
@@ -4028,11 +4105,14 @@ const _sfc_main$i = defineComponent({
       changeNumberValue,
       isIncreaseDisabled,
       isDecreaseDisabled,
-      isChangingNumber
+      isChangingNumber,
+      inputType,
+      passwordIcon,
+      toggleShowPassword
     };
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$e = {
   key: 0,
   class: "dao-input-prepend"
 };
@@ -4040,9 +4120,9 @@ const _hoisted_2$c = {
   key: 0,
   class: "dao-input-prefix"
 };
-const _hoisted_3$7 = ["type", "disabled", "value"];
-const _hoisted_4$6 = {
-  key: 3,
+const _hoisted_3$6 = ["type", "disabled", "value"];
+const _hoisted_4$5 = {
+  key: 4,
   class: "dao-input-suffix"
 };
 const _hoisted_5$4 = {
@@ -4050,11 +4130,12 @@ const _hoisted_5$4 = {
   class: "dao-input-append"
 };
 function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dao_icon = resolveComponent("dao-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.wrapClasses)
   }, [
     renderSlot(_ctx.$slots, "prepend", {}, () => [
-      _ctx.prepend ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.prepend), 1)) : createCommentVNode("", true)
+      _ctx.prepend ? (openBlock(), createElementBlock("div", _hoisted_1$e, toDisplayString(_ctx.prepend), 1)) : createCommentVNode("", true)
     ]),
     createElementVNode("div", {
       class: normalizeClass(["dao-input-inner", { "dao-input__changing-number": _ctx.isChangingNumber }])
@@ -4070,11 +4151,11 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
         ref: "input",
         class: _ctx.inputClasses
       }, _ctx.inputAttrs, {
-        type: _ctx.type,
+        type: _ctx.inputType,
         disabled: _ctx.disabled,
         value: _ctx.currentValue,
         onKeyup: _cache[0] || (_cache[0] = withKeys((...args) => _ctx.resetCurrentVal && _ctx.resetCurrentVal(...args), ["esc"]))
-      }), null, 16, _hoisted_3$7),
+      }), null, 16, _hoisted_3$6),
       _ctx.type === "number" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
         createElementVNode("i", {
           class: normalizeClass([
@@ -4095,6 +4176,13 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
           onMousedown: _cache[2] || (_cache[2] = ($event) => _ctx.changeNumberValue("decrease"))
         }, null, 34)
       ], 64)) : createCommentVNode("", true),
+      _ctx.type === "password" ? (openBlock(), createBlock(_component_dao_icon, {
+        key: 3,
+        "use-font": "",
+        class: "dao-input-password-icon",
+        name: _ctx.passwordIcon,
+        onClick: _ctx.toggleShowPassword
+      }, null, 8, ["name", "onClick"])) : createCommentVNode("", true),
       withDirectives(createElementVNode("i", {
         class: normalizeClass(["dao-input-close-icon", "icon-sys-error", { "dao-input__active": _ctx.isFocus }]),
         onClick: _cache[3] || (_cache[3] = ($event) => _ctx.resetCurrentVal())
@@ -4102,11 +4190,11 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
         [vShow, _ctx.clearable]
       ]),
       withDirectives(createElementVNode("i", {
-        class: normalizeClass(_ctx.statusClasses)
+        class: normalizeClass([_ctx.statusClasses, "dao-input-status-icon"])
       }, null, 2), [
         [vShow, ["error", "success", "loading"].includes(_ctx.status)]
       ]),
-      _ctx.slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
+      _ctx.slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
         renderSlot(_ctx.$slots, "suffix")
       ])) : createCommentVNode("", true)
     ], 2),
@@ -4186,13 +4274,13 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "dao-message-icon" };
+const _hoisted_1$d = { class: "dao-message-icon" };
 const _hoisted_2$b = { class: "dao-message-section" };
-const _hoisted_3$6 = {
+const _hoisted_3$5 = {
   key: 0,
   class: "dao-message-title"
 };
-const _hoisted_4$5 = {
+const _hoisted_4$4 = {
   key: 0,
   class: "dao-message-content"
 };
@@ -4207,7 +4295,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("div", {
         class: normalizeClass(["dao-message-inner", { "dao-message-inner-without-close": !_ctx.isCloseShow }])
       }, [
-        createElementVNode("div", _hoisted_1$e, [
+        createElementVNode("div", _hoisted_1$d, [
           renderSlot(_ctx.$slots, "icon", {}, () => [
             createElementVNode("i", {
               class: normalizeClass(`icon-sys-${_ctx.type} dao-message-icon-general dao-message-icon-${_ctx.type}`)
@@ -4217,10 +4305,10 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("div", _hoisted_2$b, [
           renderSlot(_ctx.$slots, "section", {}, () => [
             renderSlot(_ctx.$slots, "title", { className: "dao-message-title" }, () => [
-              _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_3$6, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
+              _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_3$5, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
             ]),
             renderSlot(_ctx.$slots, "default", { className: "dao-message-content" }, () => [
-              _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_4$5, toDisplayString(_ctx.content), 1)) : createCommentVNode("", true)
+              _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_4$4, toDisplayString(_ctx.content), 1)) : createCommentVNode("", true)
             ])
           ])
         ]),
@@ -4403,10 +4491,10 @@ const _sfc_main$g = defineComponent({
     });
   }
 });
-const _hoisted_1$d = { class: "dao-nav-bar" };
+const _hoisted_1$c = { class: "dao-nav-bar" };
 const _hoisted_2$a = { class: "dao-nav" };
 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("nav", _hoisted_1$d, [
+  return openBlock(), createElementBlock("nav", _hoisted_1$c, [
     renderSlot(_ctx.$slots, "header"),
     createElementVNode("ul", _hoisted_2$a, [
       renderSlot(_ctx.$slots, "default")
@@ -4449,7 +4537,7 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "dao-nav__head-text dao-nav-text" };
+const _hoisted_1$b = { class: "dao-nav__head-text dao-nav-text" };
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_icon = resolveComponent("dao-icon");
   return openBlock(), createElementBlock("li", {
@@ -4465,7 +4553,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _ctx.handleClickBack,
         onKeyup: withKeys(withModifiers(_ctx.handleClickBack, ["stop"]), ["esc"])
       }, null, 8, ["name", "use-font", "onClick", "onKeyup"])) : createCommentVNode("", true),
-      createElementVNode("span", _hoisted_1$c, toDisplayString(_ctx.title), 1)
+      createElementVNode("span", _hoisted_1$b, toDisplayString(_ctx.title), 1)
     ])
   ], 2);
 }
@@ -4551,7 +4639,7 @@ const _sfc_main$e = defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "dao-nav-slot" };
+const _hoisted_1$a = { class: "dao-nav-slot" };
 const _hoisted_2$9 = { class: "dao-nav__item-text dao-nav-text" };
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_icon = resolveComponent("dao-icon");
@@ -4564,7 +4652,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
       onKeyup: _cache[1] || (_cache[1] = withKeys((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["enter"]))
     }, [
-      createElementVNode("div", _hoisted_1$b, [
+      createElementVNode("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "default", {}, () => [
           _ctx.showIcon ? (openBlock(), createBlock(_component_dao_icon, {
             key: 0,
@@ -4701,13 +4789,13 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-const _hoisted_1$a = { class: "dao-nav-slot" };
+const _hoisted_1$9 = { class: "dao-nav-slot" };
 const _hoisted_2$8 = { class: "dao-nav__sub-text dao-nav-text" };
-const _hoisted_3$5 = {
+const _hoisted_3$4 = {
   key: 0,
   class: "icon-dropdown-line dao-nav__sub__icon-fold"
 };
-const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("span", { class: "dao-nav__sub-gap" }, null, -1);
+const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("span", { class: "dao-nav__sub-gap" }, null, -1);
 const _hoisted_5$3 = { class: "dao-nav dao-nav-inner" };
 const _hoisted_6$2 = /* @__PURE__ */ createElementVNode("span", { class: "dao-nav__sub-gap" }, null, -1);
 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
@@ -4721,7 +4809,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
       onKeyup: _cache[1] || (_cache[1] = withKeys((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["enter"]))
     }, [
-      createElementVNode("div", _hoisted_1$a, [
+      createElementVNode("div", _hoisted_1$9, [
         renderSlot(_ctx.$slots, "title", {}, () => [
           _ctx.showIcon ? (openBlock(), createBlock(_component_dao_icon, {
             key: 0,
@@ -4732,12 +4820,12 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("span", _hoisted_2$8, toDisplayString(_ctx.title), 1)
         ])
       ]),
-      _ctx.fold ? (openBlock(), createElementBlock("i", _hoisted_3$5)) : createCommentVNode("", true)
+      _ctx.fold ? (openBlock(), createElementBlock("i", _hoisted_3$4)) : createCommentVNode("", true)
     ], 34),
     createVNode(Transition, { name: "dao-nav" }, {
       default: withCtx(() => [
         withDirectives(createElementVNode("div", null, [
-          _hoisted_4$4,
+          _hoisted_4$3,
           createElementVNode("ul", _hoisted_5$3, [
             renderSlot(_ctx.$slots, "default")
           ]),
@@ -4786,14 +4874,105 @@ const paginationProps = {
   pageSizerWidth: {
     type: Number,
     default: 110
+  },
+  layout: {
+    type: Array,
+    default: ["total", "pager", "sizer"]
+  }
+};
+function tryOnScopeDispose(fn2) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn2);
+    return true;
   }
+  return false;
+}
+const isClient = typeof window !== "undefined";
+const isString = (val) => typeof val === "string";
+const noop = () => {
 };
+function unrefElement(elRef) {
+  var _a2;
+  const plain = unref(elRef);
+  return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
+}
+const defaultWindow = isClient ? window : void 0;
+isClient ? window.document : void 0;
+isClient ? window.navigator : void 0;
+isClient ? window.location : void 0;
+function useEventListener(...args) {
+  let target;
+  let event;
+  let listener;
+  let options;
+  if (isString(args[0])) {
+    [event, listener, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, event, listener, options] = args;
+  }
+  if (!target)
+    return noop;
+  let cleanup = noop;
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    el.addEventListener(event, listener, options);
+    cleanup = () => {
+      el.removeEventListener(event, listener, options);
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+function onClickOutside(target, handler, options = {}) {
+  const { window: window2 = defaultWindow, ignore, capture = true } = options;
+  if (!window2)
+    return;
+  const shouldListen = ref(true);
+  const listener = (event) => {
+    const el = unrefElement(target);
+    const composedPath = event.composedPath();
+    if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
+      return;
+    if (ignore && ignore.length > 0) {
+      if (ignore.some((target2) => {
+        const el2 = unrefElement(target2);
+        return el2 && (event.target === el2 || composedPath.includes(el2));
+      }))
+        return;
+    }
+    handler(event);
+  };
+  const cleanup = [
+    useEventListener(window2, "click", listener, { passive: true, capture }),
+    useEventListener(window2, "pointerdown", (e) => {
+      const el = unrefElement(target);
+      shouldListen.value = !!el && !e.composedPath().includes(el);
+    }, { passive: true })
+  ];
+  const stop = () => cleanup.forEach((fn2) => fn2());
+  return stop;
+}
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+_global[globalKey];
+var _a, _b;
+isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
 var select_vue_vue_type_style_index_0_lang = "";
 const _sfc_main$c = defineComponent({
   name: "DaoSelect",
   components: {
     DaoPopper: Popper
   },
+  directives: {},
   props: {
     modelValue: {
       type: [String, Number, Boolean],
@@ -4830,7 +5009,7 @@ const _sfc_main$c = defineComponent({
     },
     appendTo: {
       type: [String, Boolean, Object],
-      default: "body"
+      default: "root"
     }
   },
   emits: ["update:modelValue", "change", "search-change", "close", "open"],
@@ -4843,12 +5022,15 @@ const _sfc_main$c = defineComponent({
       search
     } = toRefs(props);
     const state = reactive({
+      optionFocusIndex: -1,
+      visible: false,
       selectedOption: void 0,
       options: [],
       searchText: ""
     });
     const popper2 = ref(null);
     const searchInput = ref(null);
+    const triggerRef = ref(null);
     const instance = getCurrentInstance();
     provide("select", instance);
     const popperOffset = computed(() => {
@@ -4881,8 +5063,8 @@ const _sfc_main$c = defineComponent({
       return classNames.join(" ");
     });
     const isSelected = computed(() => {
-      var _a;
-      return !isNullish((_a = state.selectedOption) == null ? void 0 : _a.value);
+      var _a2;
+      return !isNullish((_a2 = state.selectedOption) == null ? void 0 : _a2.value);
     });
     const isNoResult = computed(() => {
       const unrefSearch = unref(search);
@@ -4904,31 +5086,40 @@ const _sfc_main$c = defineComponent({
         }
       ]
     }));
+    const onSearchClear = () => {
+      var _a2;
+      state.searchText = "";
+      state.options.forEach((option) => {
+        option.setVisible(true);
+      });
+      (_a2 = searchInput.value) == null ? void 0 : _a2.focus();
+    };
     const onSelect = (option) => {
       const unrefPopper = unref(popper2);
       state.selectedOption = option;
+      onSearchClear();
       emit("update:modelValue", state.selectedOption.value);
       emit("change", state.selectedOption.value);
       unrefPopper == null ? void 0 : unrefPopper.hide();
     };
     const checkUpdatedOption = () => {
-      var _a;
+      var _a2;
       const unrefModelValue = unref(modelValue);
-      if (!isNullish(unrefModelValue) && unrefModelValue !== ((_a = state.selectedOption) == null ? void 0 : _a.value)) {
+      if (!isNullish(unrefModelValue) && unrefModelValue !== ((_a2 = state.selectedOption) == null ? void 0 : _a2.value)) {
         const target = state.options.find((o) => o.value === unrefModelValue);
         state.selectedOption = target;
       }
     };
     const checkNewOption = (option) => {
-      var _a;
+      var _a2;
       const unrefModelValue = unref(modelValue);
-      if (!isNullish(unrefModelValue) && isNullish((_a = state.selectedOption) == null ? void 0 : _a.value) && unrefModelValue === option.value) {
+      if (!isNullish(unrefModelValue) && isNullish((_a2 = state.selectedOption) == null ? void 0 : _a2.value) && unrefModelValue === option.value) {
         state.selectedOption = option;
       }
     };
     const checkRemovedOption = (option) => {
-      var _a;
-      if (((_a = state.selectedOption) == null ? void 0 : _a.value) === option.value) {
+      var _a2;
+      if (((_a2 = state.selectedOption) == null ? void 0 : _a2.value) === option.value) {
         state.selectedOption = void 0;
       }
     };
@@ -4948,14 +5139,6 @@ const _sfc_main$c = defineComponent({
       });
       emit("search-change", searchContent);
     };
-    const onSearchClear = () => {
-      var _a;
-      state.searchText = "";
-      state.options.forEach((option) => {
-        option.setVisible(true);
-      });
-      (_a = searchInput.value) == null ? void 0 : _a.focus();
-    };
     const remove = (index2) => {
       if (index2 > -1) {
         const [removed] = state.options.splice(index2, 1);
@@ -4973,8 +5156,106 @@ const _sfc_main$c = defineComponent({
     provide("remove", remove);
     provide("selectState", state);
     watch(modelValue, () => checkUpdatedOption());
+    const bindTriggerEleOutsideClick = {
+      cleanup: void 0,
+      visible() {
+        if (!this.cleanup) {
+          this.cleanup = onClickOutside(popper2, () => {
+            state.visible = false;
+          }, {
+            ignore: [triggerRef]
+          });
+        }
+      },
+      invisible() {
+        if (typeof this.cleanup === "function") {
+          this.cleanup();
+          this.cleanup = void 0;
+        }
+      }
+    };
+    const bindPopperTrigger = {
+      target: void 0,
+      visible() {
+        this.target = document.activeElement;
+      },
+      invisible() {
+        var _a2;
+        if (document.activeElement && document.activeElement !== this.target) {
+          (_a2 = this.target) == null ? void 0 : _a2.focus();
+        }
+        this.target = void 0;
+      }
+    };
+    watch(() => state.visible, (visible) => {
+      if (visible) {
+        bindTriggerEleOutsideClick.visible();
+        bindPopperTrigger.visible();
+        state.optionFocusIndex = (state == null ? void 0 : state.selectedOption) ? state == null ? void 0 : state.options.indexOf(state.selectedOption) : -1;
+        setTimeout(() => {
+          var _a2;
+          (_a2 = searchInput.value) == null ? void 0 : _a2.focus();
+        }, 0);
+      } else {
+        bindTriggerEleOutsideClick.invisible();
+        bindPopperTrigger.invisible();
+        state.optionFocusIndex = -1;
+      }
+    });
+    const optionsAllDisabled = computed(() => state.options.filter((option) => option.visible).every((option) => option.disabled));
+    const navigateOptions = (direction) => {
+      if (!state.visible) {
+        state.visible = true;
+        return;
+      }
+      const { length } = state.options;
+      if (length === 0) {
+        return;
+      }
+      if (optionsAllDisabled.value) {
+        return;
+      }
+      if (direction === "next") {
+        state.optionFocusIndex += 1;
+        if (state.optionFocusIndex === length) {
+          state.optionFocusIndex = 0;
+        }
+      } else if (direction === "prev") {
+        state.optionFocusIndex -= 1;
+        if (state.optionFocusIndex < 0) {
+          state.optionFocusIndex = length - 1;
+        }
+      }
+      const option = state.options[state.optionFocusIndex];
+      if (option.disabled || !option.visible) {
+        navigateOptions(direction);
+      }
+    };
+    const handleTargetTrigger = () => {
+      if (state.optionFocusIndex > -1) {
+        onSelect(state == null ? void 0 : state.options[state.optionFocusIndex]);
+        return;
+      }
+      state.visible = !state.visible;
+    };
+    const handleEvent = {
+      searchInput: {
+        keydownEnter() {
+          if (state.optionFocusIndex > -1) {
+            handleTargetTrigger();
+          } else if (state.searchText === "") {
+            state.visible = false;
+          }
+        },
+        keydownEsc() {
+          state.searchText ? onSearchClear : state.visible = false;
+        }
+      }
+    };
     return {
       popper: popper2,
+      searchInput,
+      triggerRef,
       state,
       selectClass,
       popperClass,
@@ -4987,31 +5268,22 @@ const _sfc_main$c = defineComponent({
       onSearchClear,
       add,
       remove,
-      searchInput
+      handleTargetTrigger,
+      navigateOptions,
+      handleEvent
     };
   }
 });
-const _hoisted_1$9 = {
-  class: "dao-selection",
-  tabindex: "1"
-};
-const _hoisted_2$7 = {
-  key: 0,
-  class: "dao-selection-text"
-};
-const _hoisted_3$4 = {
-  key: 1,
-  class: "dao-selection-text--placeholder"
-};
-const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("i", { class: "icon-dropdown-line dao-selection-icon" }, null, -1);
-const _hoisted_5$2 = {
+const _hoisted_1$8 = { class: "dao-selection-text" };
+const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("i", { class: "icon-dropdown-line dao-selection-icon" }, null, -1);
+const _hoisted_3$3 = {
   key: 0,
   class: "dao-selection-search"
 };
-const _hoisted_6$1 = ["placeholder"];
-const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("i", { class: "icon-search dao-selection-search-icon" }, null, -1);
-const _hoisted_8$1 = { class: "dao-option-list" };
-const _hoisted_9$1 = {
+const _hoisted_4$2 = ["placeholder"];
+const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("i", { class: "icon-search dao-selection-search-icon" }, null, -1);
+const _hoisted_6$1 = { class: "dao-option-list" };
+const _hoisted_7$1 = {
   key: "dao-option-placeholder",
   class: "dao-option-placeholder"
 };
@@ -5019,6 +5291,8 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_popper = resolveComponent("dao-popper");
   return openBlock(), createBlock(_component_dao_popper, {
     ref: "popper",
+    modelValue: _ctx.state.visible,
+    "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => _ctx.state.visible = $event),
     delay: 0,
     disabled: _ctx.disabled,
     offset: _ctx.popperOffset,
@@ -5028,64 +5302,82 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(_ctx.selectClass),
     "append-to": _ctx.appendTo,
     transition: "dao-select",
-    trigger: "click",
+    trigger: "manual",
     placement: "bottom",
-    onHide: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("close")),
-    onShow: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("open"))
+    onHide: _cache[14] || (_cache[14] = ($event) => _ctx.$emit("close")),
+    onShow: _cache[15] || (_cache[15] = ($event) => _ctx.$emit("open"))
   }, {
     content: withCtx(() => [
       renderSlot(_ctx.$slots, "optionsHeader", {}, () => [
-        _ctx.search ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
+        _ctx.search ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
           withDirectives(createElementVNode("input", {
             ref: "searchInput",
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.state.searchText = $event),
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.state.searchText = $event),
             placeholder: _ctx.searchPlaceholder,
-            tabindex: "1",
             class: "dao-selection-search-input",
             type: "search",
-            onKeydown: _cache[1] || (_cache[1] = withKeys((...args) => _ctx.onSearchClear && _ctx.onSearchClear(...args), ["esc"])),
-            onInput: _cache[2] || (_cache[2] = (...args) => _ctx.onSearchTextChange && _ctx.onSearchTextChange(...args))
-          }, null, 40, _hoisted_6$1), [
+            onInput: _cache[6] || (_cache[6] = (...args) => _ctx.onSearchTextChange && _ctx.onSearchTextChange(...args)),
+            onKeydown: [
+              _cache[7] || (_cache[7] = withKeys(withModifiers(($event) => _ctx.state.visible = false, ["stop", "prevent"]), ["tab"])),
+              _cache[8] || (_cache[8] = withKeys((...args) => _ctx.handleEvent.searchInput.keydownEsc && _ctx.handleEvent.searchInput.keydownEsc(...args), ["esc"])),
+              _cache[9] || (_cache[9] = withKeys(withModifiers((...args) => _ctx.handleEvent.searchInput.keydownEnter && _ctx.handleEvent.searchInput.keydownEnter(...args), ["stop", "prevent"]), ["enter"])),
+              _cache[10] || (_cache[10] = withKeys(withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
+              _cache[11] || (_cache[11] = withKeys(withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"]))
+            ]
+          }, null, 40, _hoisted_4$2), [
             [vModelText, _ctx.state.searchText]
           ]),
-          _hoisted_7$1,
+          _hoisted_5$2,
           withDirectives(createElementVNode("i", {
             class: "icon-sys-error dao-selection-search-clear-icon",
-            tabindex: "1",
-            onKeydown: _cache[3] || (_cache[3] = withKeys((...args) => _ctx.onSearchClear && _ctx.onSearchClear(...args), ["enter"])),
-            onClick: _cache[4] || (_cache[4] = (...args) => _ctx.onSearchClear && _ctx.onSearchClear(...args))
-          }, null, 544), [
+            onClick: _cache[12] || (_cache[12] = withModifiers((...args) => _ctx.onSearchClear && _ctx.onSearchClear(...args), ["stop", "prevent"]))
+          }, null, 512), [
             [vShow, _ctx.state.searchText]
           ])
         ])) : createCommentVNode("", true)
       ]),
-      createElementVNode("ul", _hoisted_8$1, [
+      createElementVNode("ul", _hoisted_6$1, [
         renderSlot(_ctx.$slots, "default"),
-        _ctx.isNoResult ? (openBlock(), createElementBlock("li", _hoisted_9$1, toDisplayString(_ctx.optionsPlaceholder), 1)) : createCommentVNode("", true)
+        _ctx.isNoResult ? (openBlock(), createElementBlock("li", _hoisted_7$1, toDisplayString(_ctx.optionsPlaceholder), 1)) : createCommentVNode("", true)
       ])
     ]),
     default: withCtx(() => {
-      var _a, _b;
+      var _a2, _b2;
       return [
-        createElementVNode("button", _hoisted_1$9, [
-          _ctx.isSelected ? (openBlock(), createElementBlock("span", _hoisted_2$7, [
+        createElementVNode("button", {
+          ref: "triggerRef",
+          class: "dao-selection",
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleTargetTrigger && _ctx.handleTargetTrigger(...args)),
+          onKeydown: [
+            _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => _ctx.state.visible = false, ["stop"]), ["tab"])),
+            _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => _ctx.state.visible = false, ["stop", "prevent"]), ["esc"])),
+            _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
+            _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"]))
+          ]
+        }, [
+          withDirectives(createElementVNode("span", _hoisted_1$8, [
             renderSlot(_ctx.$slots, "selected", {
-              selectedLabel: (_a = _ctx.state.selectedOption) == null ? void 0 : _a.label,
+              selectedLabel: (_a2 = _ctx.state.selectedOption) == null ? void 0 : _a2.label,
               selectedOption: _ctx.state.selectedOption,
-              selectedValue: (_b = _ctx.state.selectedOption) == null ? void 0 : _b.value
+              selectedValue: (_b2 = _ctx.state.selectedOption) == null ? void 0 : _b2.value
             }, () => {
-              var _a2;
+              var _a3;
               return [
-                createTextVNode(toDisplayString((_a2 = _ctx.state.selectedOption) == null ? void 0 : _a2.labelValue), 1)
+                createTextVNode(toDisplayString((_a3 = _ctx.state.selectedOption) == null ? void 0 : _a3.labelValue), 1)
               ];
             })
-          ])) : (openBlock(), createElementBlock("span", _hoisted_3$4, toDisplayString(_ctx.placeholder), 1)),
-          _hoisted_4$3
-        ])
+          ], 512), [
+            [vShow, _ctx.isSelected]
+          ]),
+          withDirectives(createElementVNode("span", { class: "dao-selection-text--placeholder" }, toDisplayString(_ctx.placeholder), 513), [
+            [vShow, !_ctx.isSelected]
+          ]),
+          _hoisted_2$7
+        ], 544)
       ];
     }),
     _: 3
-  }, 8, ["disabled", "offset", "popper-class", "popper-options", "class", "append-to"]);
+  }, 8, ["modelValue", "disabled", "offset", "popper-class", "popper-options", "class", "append-to"]);
 }
 var DaoSelect = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$a]]);
 var option_vue_vue_type_style_index_0_lang = "";
@@ -5106,10 +5398,12 @@ const _sfc_main$b = defineComponent({
     }
   },
   setup(props) {
+    const optionRef = ref(null);
     const addFn = inject("add");
     const onSelectFn = inject("onSelect");
     const removeFn = inject("remove");
     const selectState = inject("selectState");
+    const { label, disabled, value } = toRefs(props);
     const labelValue = computed(() => {
       if (props.label === null || props.label === void 0) {
         return props.value;
@@ -5117,9 +5411,10 @@ const _sfc_main$b = defineComponent({
       return props.label;
     });
     const instance = reactive({
-      label: props.label,
-      value: props.value,
-      labelValue: labelValue.value,
+      label,
+      value,
+      disabled,
+      labelValue,
       visible: true,
       setVisible(val) {
         instance.visible = val;
@@ -5127,8 +5422,21 @@ const _sfc_main$b = defineComponent({
     });
     const visible = computed(() => instance.visible);
     const isSelected = computed(() => {
-      var _a;
-      return ((_a = selectState == null ? void 0 : selectState.selectedOption) == null ? void 0 : _a.value) === instance.value;
+      var _a2;
+      return ((_a2 = selectState == null ? void 0 : selectState.selectedOption) == null ? void 0 : _a2.value) === instance.value;
+    });
+    const isFocus = computed(() => {
+      var _a2, _b2;
+      const index2 = (_b2 = (_a2 = selectState == null ? void 0 : selectState.options) == null ? void 0 : _a2.indexOf(instance)) != null ? _b2 : -1;
+      return index2 === (selectState == null ? void 0 : selectState.optionFocusIndex);
+    });
+    watch(isFocus, (val) => {
+      nextTick(() => {
+        if (val) {
+          const el = optionRef.value;
+          (el == null ? void 0 : el.scrollIntoViewIfNeeded) && (el == null ? void 0 : el.scrollIntoViewIfNeeded(false)) || (el == null ? void 0 : el.scrollIntoView) && el.scrollIntoView(false);
+        }
+      });
     });
     const onClick = () => {
       if (!props.disabled && typeof onSelectFn === "function") {
@@ -5139,31 +5447,35 @@ const _sfc_main$b = defineComponent({
       addFn(instance);
     }
     onBeforeUnmount(() => {
-      var _a;
+      var _a2;
       if (typeof removeFn === "function") {
-        const index2 = (_a = selectState == null ? void 0 : selectState.options.indexOf(instance)) != null ? _a : -1;
+        const index2 = (_a2 = selectState == null ? void 0 : selectState.options.indexOf(instance)) != null ? _a2 : -1;
         removeFn(index2);
       }
     });
     return {
+      optionRef,
       visible,
       labelValue,
       isSelected,
+      isFocus,
       onClick
     };
   }
 });
-const _hoisted_1$8 = ["title"];
+const _hoisted_1$7 = ["title"];
 const _hoisted_2$6 = {
   key: 0,
   class: "icon-checked dao-option-checkmark"
 };
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("li", {
+    ref: "optionRef",
     class: normalizeClass([
       "dao-option",
       {
         "dao-option-active": _ctx.isSelected,
+        "dao-option--focus": _ctx.isFocus,
         "dao-option-disabled": _ctx.disabled
       }
     ]),
@@ -5175,7 +5487,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default", {}, () => [
         createTextVNode(toDisplayString(_ctx.labelValue), 1)
       ])
-    ], 8, _hoisted_1$8),
+    ], 8, _hoisted_1$7),
     _ctx.isSelected ? (openBlock(), createElementBlock("i", _hoisted_2$6)) : createCommentVNode("", true)
   ], 2)), [
     [vShow, _ctx.visible]
@@ -5217,6 +5529,16 @@ const _sfc_main$a = defineComponent({
       }
       return [...filteredPageSizeOptions, props.pageSize].sort(numberAscSort);
     });
+    const computedLayout = computed(() => {
+      if (!props.layout || props.layout.length === 0) {
+        return { show: false };
+      }
+      const res = { show: true };
+      props.layout.forEach((key) => {
+        res[key] = true;
+      });
+      return res;
+    });
     const prevPage = () => {
       if (currentPage.value === 1) {
         return;
@@ -5246,13 +5568,11 @@ const _sfc_main$a = defineComponent({
       emit("update:current-page", value);
       emit("page-change", value);
     };
-    watch(currentPage, (val) => {
-      currentShowPage.value = val;
-    });
-    watch(totalPage, (val) => {
-      if (currentShowPage.value > val) {
-        currentShowPage.value = val;
-        emit("update:current-page", val);
+    watch([currentPage, totalPage], () => {
+      currentShowPage.value = props.currentPage;
+      if (currentShowPage.value > totalPage.value) {
+        currentShowPage.value = totalPage.value;
+        emit("update:current-page", totalPage.value);
       }
     });
     const updatePageSize = (val) => {
@@ -5271,6 +5591,7 @@ const _sfc_main$a = defineComponent({
       totalText,
       totalPage,
       computedPageSizeOptions,
+      computedLayout,
       prevPage,
       nextPage,
       targetPage,
@@ -5279,47 +5600,50 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "dao-pagination__total" };
-const _hoisted_2$5 = { class: "dao-pagination__pager" };
-const _hoisted_3$3 = ["disabled"];
-const _hoisted_4$2 = { class: "dao-pagination__pager-total" };
+const _hoisted_1$6 = ["disabled"];
+const _hoisted_2$5 = { class: "dao-pagination__pager-total" };
 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_option = resolveComponent("dao-option");
   const _component_dao_select = resolveComponent("dao-select");
-  return openBlock(), createElementBlock("div", {
+  return _ctx.computedLayout.show ? (openBlock(), createElementBlock("div", {
+    key: 0,
     class: normalizeClass(["dao-pagination", { "dao-pagination--compact": _ctx.compact }])
   }, [
-    createElementVNode("div", _hoisted_1$7, toDisplayString(_ctx.totalText), 1),
-    createElementVNode("div", _hoisted_2$5, [
+    createElementVNode("div", {
+      class: normalizeClass(["dao-pagination__total", { "is-invisible": !_ctx.computedLayout.total }])
+    }, toDisplayString(_ctx.totalText), 3),
+    createElementVNode("div", {
+      class: normalizeClass(["dao-pagination__pager", { "is-invisible": !_ctx.computedLayout.pager }])
+    }, [
       createElementVNode("i", {
         class: normalizeClass([
           "icon-arrow-previous",
           "dao-pagination__pager-prev",
-          { "dao-pagination__pager-icon--disabled": _ctx.currentPage === 1 }
+          { "dao-pagination__pager-icon--disabled": _ctx.currentPage <= 1 }
         ]),
         onClick: _cache[0] || (_cache[0] = (...args) => _ctx.prevPage && _ctx.prevPage(...args))
       }, null, 2),
       withDirectives(createElementVNode("input", {
         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.currentShowPage = $event),
         class: "dao-pagination__pager-current",
-        disabled: _ctx.totalPage === 1,
+        disabled: _ctx.totalPage <= 1,
         onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => _ctx.targetPage && _ctx.targetPage(...args), ["enter"])),
         onInput: _cache[3] || (_cache[3] = (...args) => _ctx.currentShowPageFormat && _ctx.currentShowPageFormat(...args))
-      }, null, 40, _hoisted_3$3), [
+      }, null, 40, _hoisted_1$6), [
         [vModelText, _ctx.currentShowPage]
       ]),
-      createElementVNode("span", _hoisted_4$2, " / " + toDisplayString(_ctx.totalPage), 1),
+      createElementVNode("span", _hoisted_2$5, " / " + toDisplayString(_ctx.totalPage), 1),
       createElementVNode("i", {
         class: normalizeClass([
           "icon-arrow-next",
           "dao-pagination__pager-next",
-          { "dao-pagination__pager-icon--disabled": _ctx.currentPage === _ctx.totalPage }
+          { "dao-pagination__pager-icon--disabled": _ctx.currentPage >= _ctx.totalPage }
         ]),
         onClick: _cache[4] || (_cache[4] = (...args) => _ctx.nextPage && _ctx.nextPage(...args))
       }, null, 2)
-    ]),
+    ], 2),
     createVNode(_component_dao_select, {
-      class: "dao-pagination__sizer",
+      class: normalizeClass(["dao-pagination__sizer", { "is-invisible": !_ctx.computedLayout.sizer }]),
       "model-value": _ctx.pageSize,
       size: "sm",
       style: normalizeStyle({ width: `${_ctx.pageSizerWidth}px` }),
@@ -5336,8 +5660,8 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128))
       ]),
       _: 1
-    }, 8, ["model-value", "style", "onChange"])
-  ], 2);
+    }, 8, ["class", "model-value", "style", "onChange"])
+  ], 2)) : createCommentVNode("", true);
 }
 var DaoPagination = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
 var popover_scss_vue_type_style_index_0_src_lang = "";
@@ -5396,7 +5720,7 @@ const _sfc_main$8 = defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "dao-progress" };
+const _hoisted_1$5 = { class: "dao-progress" };
 const _hoisted_2$4 = {
   key: 1,
   class: "dao-progress__stacked"
@@ -5406,7 +5730,7 @@ const _hoisted_3$2 = {
   class: "dao-progress__text"
 };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+  return openBlock(), createElementBlock("div", _hoisted_1$5, [
     createElementVNode("div", {
       class: "dao-progress__inner",
       style: normalizeStyle({ background: _ctx.bgColor })
@@ -5502,7 +5826,7 @@ const _sfc_main$7 = defineComponent({
     };
   }
 });
-const _hoisted_1$5 = ["disabled", "name", "checked"];
+const _hoisted_1$4 = ["disabled", "name", "checked"];
 const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("span", { class: "dao-radio-inner" }, null, -1);
 const _hoisted_3$1 = {
   key: 0,
@@ -5530,7 +5854,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         name: _ctx.name,
         checked: _ctx.currentValue,
         onChange: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args))
-      }, null, 40, _hoisted_1$5),
+      }, null, 40, _hoisted_1$4),
       _hoisted_2$3
     ], 2),
     _ctx.$slots.default || _ctx.label || _ctx.$slots.helper ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
@@ -5645,7 +5969,7 @@ const _sfc_main$5 = defineComponent({
     };
   }
 });
-const _hoisted_1$4 = ["value", "name", "disabled"];
+const _hoisted_1$3 = ["value", "name", "disabled"];
 const _hoisted_2$2 = {
   key: 0,
   class: "dao-switch__label"
@@ -5661,7 +5985,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       value: _ctx.currentValue,
       name: _ctx.name,
       disabled: _ctx.disabled
-    }, null, 8, _hoisted_1$4),
+    }, null, 8, _hoisted_1$3),
     createElementVNode("span", {
       class: normalizeClass(["dao-switch__pill", { "dao-switch-checked": _ctx.currentValue }])
     }, null, 2),
@@ -5717,9 +6041,9 @@ const _sfc_main$4 = defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "dao-table-resizer-separator" };
+const _hoisted_1$2 = { class: "dao-table-resizer-separator" };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$3, [
+  return openBlock(), createElementBlock("span", _hoisted_1$2, [
     !_ctx.disabled ? (openBlock(), createElementBlock("span", {
       key: 0,
       class: "dao-table-resizer-handle",
@@ -5791,7 +6115,16 @@ const tableProps = {
   pageSizerWidth: {
     type: Number,
     default: 110
-  }
+  },
+  emptyText: {
+    type: String,
+    default: "\u6682\u65E0\u6570\u636E"
+  },
+  noShadow: {
+    type: Boolean,
+    default: false
+  },
+  pageLayout: paginationProps.layout
 };
 var table_vue_vue_type_style_index_0_lang = "";
 const positiveIntegerNumberReg = /^[1-9]\d*$/;
@@ -5834,10 +6167,24 @@ const _sfc_main$3 = defineComponent({
     const expandedRows = reactive(new WeakSet());
     const columnRefs = reactive({});
     const columns = reactive([]);
-    const currentPage = toRef(props, "currentPage");
-    const pageSize = toRef(props, "pageSize");
+    const currentPage = computed({
+      get() {
+        return props.currentPage;
+      },
+      set(value) {
+        emit("update:current-page", value);
+      }
+    });
+    const pageSize = computed({
+      get() {
+        return props.pageSize;
+      },
+      set(value) {
+        emit("update:page-size", value);
+      }
+    });
     const tableScroll = ref();
-    const global = reactive({
+    const global2 = reactive({
       checked: false,
       indeterminate: false
     });
@@ -5863,8 +6210,8 @@ const _sfc_main$3 = defineComponent({
     watch(tableSetting, (val) => {
       setTableSetting(val);
     });
-    function formatDefaultTableSetting() {
-      return columns.reduce((prev, current) => {
+    function formatDefaultTableSetting(tempColumns) {
+      return tempColumns.reduce((prev, current) => {
         const preValue = prev;
         preValue[current.id] = {
           width: current.defaultWidth,
@@ -5874,16 +6221,16 @@ const _sfc_main$3 = defineComponent({
       }, {});
     }
     const init = () => {
-      columns.length = 0;
+      const tempColumns = [];
       props.columns.forEach((column) => {
-        columns.push(__spreadValues(__spreadValues({}, defaultColumnConfig), column));
+        tempColumns.push(__spreadValues(__spreadValues({}, defaultColumnConfig), column));
       });
       const storedTableSetting = getTableSetting();
-      const defaultTableSetting = formatDefaultTableSetting();
+      const defaultTableSetting = formatDefaultTableSetting(tempColumns);
       if (!storedTableSetting) {
         Object.assign(tableSetting, defaultTableSetting);
       } else {
-        columns.forEach((column) => {
+        tempColumns.forEach((column) => {
           const { id } = column;
           if (!storedTableSetting[id]) {
             tableSetting[id] = {
@@ -5900,6 +6247,7 @@ const _sfc_main$3 = defineComponent({
           }
         });
       }
+      columns.splice(0, columns.length, ...tempColumns);
     };
     const columnStyle = (id) => {
       const setting = tableSetting[id];
@@ -5923,6 +6271,7 @@ const _sfc_main$3 = defineComponent({
       }
       return classes;
     });
+    const isEmpty = computed(() => (props.data || []).length === 0);
     const sortColumn = (column) => {
       if (!column.sortable) {
         return;
@@ -5964,7 +6313,7 @@ const _sfc_main$3 = defineComponent({
       }
     };
     const toggleSelectedAll = () => {
-      if (global.checked) {
+      if (global2.checked) {
         selectedRows.clear();
         emit("select", []);
       } else {
@@ -5992,16 +6341,9 @@ const _sfc_main$3 = defineComponent({
       clearExpansion();
       clearSelection();
     };
-    init();
     watch(() => props.columns, () => {
       init();
-    }, { deep: true });
-    watch(currentPage, (val) => {
-      emit("update:current-page", val);
-    });
-    watch(pageSize, (val) => {
-      emit("update:page-size", val);
-    });
+    }, { deep: true, immediate: true });
     watchEffect(() => {
       let have = 0;
       let notHave = 0;
@@ -6017,14 +6359,14 @@ const _sfc_main$3 = defineComponent({
         }
       }
       if (have && notHave) {
-        global.checked = false;
-        global.indeterminate = true;
+        global2.checked = false;
+        global2.indeterminate = true;
       } else if (have) {
-        global.checked = true;
-        global.indeterminate = false;
+        global2.checked = true;
+        global2.indeterminate = false;
       } else {
-        global.checked = false;
-        global.indeterminate = false;
+        global2.checked = false;
+        global2.indeterminate = false;
       }
     });
     const isEllipsis = () => {
@@ -6073,66 +6415,72 @@ const _sfc_main$3 = defineComponent({
       currentPage,
       pageSize,
       clearState,
-      global,
+      global: global2,
       tableScroll,
       expandedRows,
-      onRowClick
+      onRowClick,
+      isEmpty
     };
   }
 });
-const _hoisted_1$2 = { class: "dao-table-container" };
-const _hoisted_2$1 = { class: "dao-table" };
-const _hoisted_3 = {
+const _hoisted_1$1 = { class: "dao-table" };
+const _hoisted_2$1 = {
   key: 0,
   class: "dao-table-thead"
 };
-const _hoisted_4 = { class: "dao-table-tr" };
-const _hoisted_5 = {
+const _hoisted_3 = { class: "dao-table-tr" };
+const _hoisted_4 = {
   key: 0,
   class: "dao-table-th"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 1,
   class: "dao-table-th dao-table-th--expandable"
 };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = { class: "dao-table-th__content" };
-const _hoisted_9 = { class: "dao-table-tbody" };
-const _hoisted_10 = ["onClick"];
-const _hoisted_11 = {
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "dao-table-th__content" };
+const _hoisted_8 = { class: "dao-table-tbody" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = {
   key: 0,
   class: "dao-table-td"
 };
-const _hoisted_12 = {
+const _hoisted_11 = {
   key: 1,
   class: "dao-table-td"
 };
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = {
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = {
   key: 0,
   class: "dao-table-tr-expand"
 };
+const _hoisted_14 = {
+  key: 0,
+  class: "dao-table__empty-block"
+};
 const _hoisted_15 = { class: "dao-table-pagination" };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dao_checkbox = resolveComponent("dao-checkbox");
   const _component_dao_resizer = resolveComponent("dao-resizer");
   const _component_dao_pagination = resolveComponent("dao-pagination");
-  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["dao-table-container", { "dao-table-container--with-shadow": !_ctx.noShadow }])
+  }, [
     createElementVNode("div", {
       ref: "tableScroll",
       class: normalizeClass(["dao-table-scroll", _ctx.tableWrapperClasses])
     }, [
-      createElementVNode("table", _hoisted_2$1, [
-        _ctx.showHeader ? (openBlock(), createElementBlock("thead", _hoisted_3, [
-          createElementVNode("tr", _hoisted_4, [
-            _ctx.selectable ? (openBlock(), createElementBlock("th", _hoisted_5, [
+      createElementVNode("table", _hoisted_1$1, [
+        _ctx.showHeader ? (openBlock(), createElementBlock("thead", _hoisted_2$1, [
+          createElementVNode("tr", _hoisted_3, [
+            _ctx.selectable ? (openBlock(), createElementBlock("th", _hoisted_4, [
               createVNode(_component_dao_checkbox, {
                 checked: _ctx.global.checked,
                 indeterminate: _ctx.global.indeterminate,
                 onChange: _ctx.toggleSelectedAll
               }, null, 8, ["checked", "indeterminate", "onChange"])
             ])) : createCommentVNode("", true),
-            _ctx.expandable ? (openBlock(), createElementBlock("th", _hoisted_6)) : createCommentVNode("", true),
+            _ctx.expandable ? (openBlock(), createElementBlock("th", _hoisted_5)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filterColumns, (column) => {
               return openBlock(), createElementBlock("th", {
                 key: column.id,
@@ -6141,7 +6489,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
                 style: normalizeStyle(_ctx.columnStyle(column.id)),
                 onClick: ($event) => _ctx.sortColumn(column)
               }, [
-                createElementVNode("span", _hoisted_8, [
+                createElementVNode("span", _hoisted_7, [
                   renderSlot(_ctx.$slots, `th-${column.id}`, {}, () => [
                     createTextVNode(toDisplayString(column.header), 1)
                   ])
@@ -6160,28 +6508,28 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
                   onUpdateColumnWidth: ($event) => _ctx.updateColumnWidth($event, column.id),
                   onAfterResize: ($event) => _ctx.$emit("afterResize", column.id)
                 }, null, 8, ["disabled", "setting", "column", "onFixedColumnWidth", "onUpdateColumnWidth", "onAfterResize"])
-              ], 14, _hoisted_7);
+              ], 14, _hoisted_6);
             }), 128))
           ])
         ])) : createCommentVNode("", true),
-        createElementVNode("tbody", _hoisted_9, [
+        createElementVNode("tbody", _hoisted_8, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (row, index2) => {
             return openBlock(), createElementBlock(Fragment, { key: index2 }, [
               createElementVNode("tr", {
                 class: normalizeClass(["dao-table-tr", { "dao-table-tr--expandable-open": _ctx.expandable && _ctx.isRowExpanded(row) }]),
                 onClick: ($event) => _ctx.onRowClick(row, index2)
               }, [
-                _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_11, [
+                _ctx.selectable ? (openBlock(), createElementBlock("td", _hoisted_10, [
                   createVNode(_component_dao_checkbox, {
                     checked: _ctx.isRowSelected(row),
                     onChange: ($event) => _ctx.toggleSelected(row)
                   }, null, 8, ["checked", "onChange"])
                 ])) : createCommentVNode("", true),
-                _ctx.expandable ? (openBlock(), createElementBlock("td", _hoisted_12, [
+                _ctx.expandable ? (openBlock(), createElementBlock("td", _hoisted_11, [
                   createElementVNode("i", {
                     class: "dao-table-expand-toggle icon-arrow-sharp",
                     onClick: ($event) => _ctx.toggleExpand(row, index2)
-                  }, null, 8, _hoisted_13)
+                  }, null, 8, _hoisted_12)
                 ])) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filterColumns, (column) => {
                   return openBlock(), createElementBlock("td", {
@@ -6198,8 +6546,8 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     ])
                   ], 4);
                 }), 128))
-              ], 10, _hoisted_10),
-              _ctx.expandable && _ctx.expandedRows.has(row) ? withDirectives((openBlock(), createElementBlock("tr", _hoisted_14, [
+              ], 10, _hoisted_9),
+              _ctx.expandable && _ctx.expandedRows.has(row) ? withDirectives((openBlock(), createElementBlock("tr", _hoisted_13, [
                 renderSlot(_ctx.$slots, "expand", {
                   row,
                   rowIndex: index2
@@ -6208,43 +6556,53 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
                 [vShow, _ctx.isRowExpanded(row)]
               ]) : createCommentVNode("", true)
             ], 64);
-          }), 128))
+          }), 128)),
+          _ctx.isEmpty ? (openBlock(), createElementBlock("div", _hoisted_14, [
+            renderSlot(_ctx.$slots, "empty", {}, () => [
+              createTextVNode(toDisplayString(_ctx.emptyText), 1)
+            ])
+          ])) : createCommentVNode("", true)
         ])
       ])
     ], 2),
     createElementVNode("div", _hoisted_15, [
-      renderSlot(_ctx.$slots, "pagination", {}, () => [
-        createVNode(_component_dao_pagination, {
-          "current-page": _ctx.currentPage,
-          "onUpdate:current-page": _cache[0] || (_cache[0] = ($event) => _ctx.currentPage = $event),
-          "page-size": _ctx.pageSize,
-          "onUpdate:page-size": _cache[1] || (_cache[1] = ($event) => _ctx.pageSize = $event),
-          "page-size-options": _ctx.pageSizeOptions,
-          "page-format": _ctx.pageFormat,
-          compact: _ctx.compact,
-          total: _ctx.total,
-          "total-format": _ctx.totalFormat,
-          "page-sizer-width": _ctx.pageSizerWidth,
-          onNext: _cache[2] || (_cache[2] = ($event) => {
-            _ctx.$emit("next", $event);
-            _ctx.clearState();
-          }),
-          onPrev: _cache[3] || (_cache[3] = ($event) => {
-            _ctx.$emit("prev", $event);
-            _ctx.clearState();
-          }),
-          onPageChange: _cache[4] || (_cache[4] = ($event) => {
-            _ctx.$emit("pageChange", $event);
-            _ctx.clearState();
-          }),
-          onSizeChange: _cache[5] || (_cache[5] = ($event) => {
-            _ctx.$emit("sizeChange", $event);
-            _ctx.clearState();
-          })
-        }, null, 8, ["current-page", "page-size", "page-size-options", "page-format", "compact", "total", "total-format", "page-sizer-width"])
-      ])
+      renderSlot(_ctx.$slots, "pagination", {}, () => {
+        var _a2;
+        return [
+          !_ctx.isEmpty && ((_a2 = _ctx.pageLayout) == null ? void 0 : _a2.length) ? (openBlock(), createBlock(_component_dao_pagination, {
+            key: 0,
+            "current-page": _ctx.currentPage,
+            "onUpdate:current-page": _cache[0] || (_cache[0] = ($event) => _ctx.currentPage = $event),
+            "page-size": _ctx.pageSize,
+            "onUpdate:page-size": _cache[1] || (_cache[1] = ($event) => _ctx.pageSize = $event),
+            "page-size-options": _ctx.pageSizeOptions,
+            "page-format": _ctx.pageFormat,
+            compact: _ctx.compact,
+            total: _ctx.total,
+            "total-format": _ctx.totalFormat,
+            layout: _ctx.pageLayout,
+            "page-sizer-width": _ctx.pageSizerWidth,
+            onNext: _cache[2] || (_cache[2] = ($event) => {
+              _ctx.$emit("next", $event);
+              _ctx.clearState();
+            }),
+            onPrev: _cache[3] || (_cache[3] = ($event) => {
+              _ctx.$emit("prev", $event);
+              _ctx.clearState();
+            }),
+            onPageChange: _cache[4] || (_cache[4] = ($event) => {
+              _ctx.$emit("pageChange", $event);
+              _ctx.clearState();
+            }),
+            onSizeChange: _cache[5] || (_cache[5] = ($event) => {
+              _ctx.$emit("sizeChange", $event);
+              _ctx.clearState();
+            })
+          }, null, 8, ["current-page", "page-size", "page-size-options", "page-format", "compact", "total", "total-format", "layout", "page-sizer-width"])) : createCommentVNode("", true)
+        ];
+      })
     ])
-  ]);
+  ], 2);
 }
 var table = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
 var tabNav_scss_vue_type_style_index_0_src_lang = "";
@@ -6272,6 +6630,7 @@ const _sfc_main$2 = defineComponent({
     const tabNav = ref();
     let lineStyle;
     let setActiveLineStyle;
+    let tabResizeObserver;
     const isLine = computed(() => props.type === "line");
     const renderLines = () => {
       if (!isLine.value) {
@@ -6295,19 +6654,22 @@ const _sfc_main$2 = defineComponent({
           hoverTab.value = void 0;
         }
       };
-      const activeLineStyle = ref();
+      const activeLineStyle = ref({});
       setActiveLineStyle = () => {
         const tab = unref(activeTab);
-        activeLineStyle.value = tab ? {
-          "--active-line-width": `${tab.offsetWidth || 0}px`,
-          "--active-line-left": `${tab.offsetLeft || 0}px`
-        } : {};
+        if (tab && tab.offsetWidth && tab.offsetLeft) {
+          activeLineStyle.value = {
+            "--active-line-width": `${tab.offsetWidth || 0}px`,
+            "--active-line-left": `${tab.offsetLeft || 0}px`
+          };
+        }
       };
-      watch(activeTab, setActiveLineStyle);
-      nextTick(() => {
-        var _a;
-        if (tabNav.value) {
-          (_a = tabNav.value) == null ? void 0 : _a.addEventListener("DOMSubtreeModified", setActiveLineStyle);
+      watch(activeTab, (val) => {
+        setActiveLineStyle();
+        tabResizeObserver == null ? void 0 : tabResizeObserver.disconnect();
+        tabResizeObserver = new ResizeObserver(setActiveLineStyle);
+        if (tabNav.value && val) {
+          tabResizeObserver.observe(val);
         }
       });
       lineStyle = computed(() => __spreadValues(__spreadValues({}, activeLineStyle.value), hoverLineStyle.value));
@@ -6320,9 +6682,8 @@ const _sfc_main$2 = defineComponent({
     });
     onMounted(renderLines);
     onUnmounted(() => {
-      var _a;
       if (tabNav.value) {
-        (_a = tabNav.value) == null ? void 0 : _a.removeEventListener("DOMSubtreeModified", setActiveLineStyle);
+        tabResizeObserver == null ? void 0 : tabResizeObserver.disconnect();
       }
     });
     const handleClick = (event, tab) => {
@@ -6416,11 +6777,11 @@ const _sfc_main$1 = defineComponent({
     const tabList = reactive([]);
     const tabBody = ref();
     const addTab = (tab, child) => {
-      var _a;
+      var _a2;
       if (!child.value) {
         return;
       }
-      const index2 = Array.from(((_a = tabBody.value) == null ? void 0 : _a.children) || []).indexOf(child.value);
+      const index2 = Array.from(((_a2 = tabBody.value) == null ? void 0 : _a2.children) || []).indexOf(child.value);
       if (index2 > -1) {
         tabList.splice(index2, 0, tab);
       }
@@ -6441,14 +6802,14 @@ const _sfc_main$1 = defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { class: "dao-tabs" };
+const _hoisted_1 = { class: "dao-tabs" };
 const _hoisted_2 = {
   ref: "tabBody",
   class: "dao-tabs-body"
 };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tab_nav = resolveComponent("tab-nav");
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+  return openBlock(), createElementBlock("div", _hoisted_1, [
     createVNode(_component_tab_nav, {
       type: _ctx.type,
       "tab-list": _ctx.tabList,
@@ -6463,6 +6824,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 var tabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+var tabItem_scss_vue_type_style_index_0_src_lang = "";
 const _sfc_main = defineComponent({
   name: "DaoTabItem",
   props: {
@@ -6493,16 +6855,15 @@ const _sfc_main = defineComponent({
     };
   }
 });
-const _hoisted_1 = {
-  ref: "tabItem",
-  class: "dao-tab-item"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+  return openBlock(), createElementBlock("div", {
+    ref: "tabItem",
+    class: normalizeClass(["dao-tab-item", {
+      "dao-tab-item--hidden": !_ctx.active
+    }])
+  }, [
     renderSlot(_ctx.$slots, "default")
-  ], 512)), [
-    [vShow, _ctx.active]
-  ]);
+  ], 2);
 }
 var tabItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 var components = /* @__PURE__ */ Object.freeze({