npm - @dao-style/core - Versions diffs - 0.0.1-beta.11 → 0.0.1-beta.14 - Mend

@dao-style/core 0.0.1-beta.11 → 0.0.1-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/components/checkbox/checkbox-group.vue.d.ts +3 -2
package/dist/components/checkbox/checkbox.vue.d.ts +14 -12
package/dist/components/checkbox/props.d.ts +1 -0
package/dist/components/drawer/drawer.vue.d.ts +2 -1
package/dist/components/form/form-item.vue.d.ts +7 -0
package/dist/components/input/input.vue.d.ts +3 -0
package/dist/components/nav/nav-item.vue.d.ts +2 -2
package/dist/components/nav/nav-sub.vue.d.ts +2 -2
package/dist/components/pagination/pagination-props.d.ts +5 -0
package/dist/components/pagination/pagination.vue.d.ts +19 -5
package/dist/components/popper/popper.vue.d.ts +1 -1
package/dist/components/select/option.vue.d.ts +5 -0
package/dist/components/select/select.vue.d.ts +14 -1
package/dist/components/select/types.d.ts +3 -0
package/dist/components/table/table-props.d.ts +12 -0
package/dist/components/table/table.vue.d.ts +29 -7
package/dist/dao-style.es.js +708 -351
package/dist/dao-style.umd.js +1 -1
package/dist/style.css +1 -1
package/dist/utils/constant.d.ts +5 -4
package/package.json +3 -1

package/dist/dao-style.es.js CHANGED Viewed

@@ -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,28 @@ 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;
+  let internalRoot = "body";
+  if (!app) {
+    return internalRoot;
+  }
+  const rootNode = (_c = (_b2 = (_a2 = app == null ? void 0 : app.root) == null ? void 0 : _a2.vnode) == null ? void 0 : _b2.el) == null ? void 0 : _c.parentNode.getRootNode();
+  if (rootNode) {
+    internalRoot = (_d = rootNode.body) != null ? _d : rootNode;
+  }
+  return internalRoot;
+}
 const _sfc_main$v = defineComponent({
   name: "DaoPopper",
   components: {
@@ -2657,12 +2686,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 +2713,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 +2731,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 +2772,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 +2898,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 +2913,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 +3086,7 @@ const _sfc_main$u = defineComponent({
     },
     appendTo: {
       type: [String, Boolean, Object],
-      default: "body"
+      default: "root"
     },
     placement: {
       type: String,
@@ -3069,11 +3112,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 +3129,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 +3140,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 +3159,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 +3316,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 +3399,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 +3416,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 +3424,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 +3499,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 +3532,10 @@ const _sfc_main$n = defineComponent({
       type: String,
       default: ""
     },
+    required: {
+      type: Boolean,
+      default: false
+    },
     paddingTop: {
       type: [Number, String],
       default: 0
@@ -3524,30 +3574,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 +3611,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 +3624,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 +3733,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 +3799,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 +3819,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 +3899,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 +3946,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 +3991,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 +4030,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 +4038,7 @@ const _sfc_main$i = defineComponent({
       }
     };
     const onInputNumberMouseup = (event) => {
-      var _a;
+      var _a2;
       if (isChangingNumber.value) {
         event.preventDefault();
       }
@@ -3980,7 +4053,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 +4101,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 +4116,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 +4126,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 +4147,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 +4172,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 +4186,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 +4270,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 +4291,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 +4301,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 +4487,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 +4533,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 +4549,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 +4635,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 +4648,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 +4785,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 +4805,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 +4816,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 +4870,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 +5005,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 +5018,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 +5059,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 +5082,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 +5135,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 +5152,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 +5264,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 +5287,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 +5298,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 +5394,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 +5407,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 +5418,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 +5443,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 +5483,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 +5525,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 +5564,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 +5587,7 @@ const _sfc_main$a = defineComponent({
       totalText,
       totalPage,
       computedPageSizeOptions,
+      computedLayout,
       prevPage,
       nextPage,
       targetPage,
@@ -5279,47 +5596,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 +5656,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 +5716,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 +5726,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 +5822,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 +5850,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 +5965,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 +5981,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 +6037,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 +6111,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 +6163,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 +6206,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 +6217,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 +6243,7 @@ const _sfc_main$3 = defineComponent({
           }
         });
       }
+      columns.splice(0, columns.length, ...tempColumns);
     };
     const columnStyle = (id) => {
       const setting = tableSetting[id];
@@ -5923,6 +6267,7 @@ const _sfc_main$3 = defineComponent({
       }
       return classes;
     });
+    const isEmpty = computed(() => (props.data || []).length === 0);
     const sortColumn = (column) => {
       if (!column.sortable) {
         return;
@@ -5964,7 +6309,7 @@ const _sfc_main$3 = defineComponent({
       }
     };
     const toggleSelectedAll = () => {
-      if (global.checked) {
+      if (global2.checked) {
         selectedRows.clear();
         emit("select", []);
       } else {
@@ -5992,16 +6337,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 +6355,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 +6411,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 +6485,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 +6504,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 +6542,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 +6552,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 +6626,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 +6650,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 +6678,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 +6773,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 +6798,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 +6820,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 +6851,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({