Merge branch 'v1.7.0' of https://gitee.com/layui/layui-vue into v1.7.0

2022-12-09 16:42:32 +08:00 · 2022-12-09 16:42:32 +08:00 · 379a852aee
commit 379a852aee
parent 79bc8b840e cf3695af6b
39 changed files with 596 additions and 381 deletions
--- a/README.md
+++ b/README.md
@ -16,13 +16,13 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.

 ## 反馈

-欢迎在 [提交问题](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想贡献，请查看 [快速指南](./CONTRIBUTING.md)！
+欢迎在 [Gitee Issues](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想参与贡献，请查看 [快速指南](./CONTRIBUTING.md)！

 如果您有什么想聊的，请随时加入我们的 [Gitter chat](https://gitter.im/layui-vue/community)！

 ## 贡献者

-这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些 [出色的贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
+这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些出色的 [贡献者](https://github.com/layui/layui-vue/graphs/contributors)。

 <a href="https://github.com/layui/layui-vue/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=layui/layui-vue" />
--- a/README.zh.md
+++ b/README.zh.md
@ -16,13 +16,13 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.

 ## 反馈

-欢迎在 [提交问题](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想贡献，请查看 [快速指南](./CONTRIBUTING.md)！
+欢迎在 [Gitee Issues](https://github.com/layui/layui-vue/issues/new) 上向我们反馈。欢迎功能请求。如果您想参与贡献，请查看 [快速指南](./CONTRIBUTING.md)！

 如果您有什么想聊的，请随时加入我们的 [Gitter chat](https://gitter.im/layui-vue/community)！

 ## 贡献者

-这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些 [出色的贡献者](https://github.com/layui/layui-vue/graphs/contributors)。
+这个项目遵循 [所有贡献者](https://github.com/layui/layui-vue/graphs/contributors) 规范，感谢这些出色的 [贡献者](https://github.com/layui/layui-vue/graphs/contributors)。

 <a href="https://github.com/layui/layui-vue/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=layui/layui-vue" />
--- a/package/component/package.json
+++ b/package/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "1.7.7",
+  "version": "1.7.11",
  "author": "就眠儀式",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@ -31,7 +31,9 @@
        :size="size"
        @clear="onClear"
      ></lay-input>
-      <slot v-else></slot>
+      <div class="slot-area" v-else>
+        <slot></slot>
+      </div>

      <template #content>
        <div class="layui-cascader-panel">
@ -137,12 +139,19 @@ watch(
 watch(
  () => props.modelValue,
  () => {
-    if (props.modelValue === null || props.modelValue === "") {
-      onClear();
+    if (watchModelValue.value) {
+      if (props.modelValue === null || props.modelValue === "") {
+        onClear();
+      } else {
+        updateDisplayByModelValue();
+      }
+      setTimeout(() => {
+        watchModelValue.value = true;
+      }, 0);
    }
  }
 );
-
+const watchModelValue = ref(true);
 const treeData = ref<any>([]);
 const initTreeData = () => {
  let treeLvNum = getMaxFloor(props.options);
@ -159,31 +168,28 @@ const initTreeData = () => {
      };
    }
  }
+  updateDisplayByModelValue();
+};
+
+function updateDisplayByModelValue() {
  if (props.modelValue) {
    try {
      let valueData = props.modelValue.split(props.decollator);
-      let data: any[] = [];
-      for (let index = 0; index < treeData.value.length; index++) {
-        const element = treeData.value[index];
-        const nowValue = valueData[index];
-        for (let i = 0; i < element.length; i++) {
-          const ele = element[i];
-          if (nowValue === ele.value) {
-            data.push(ele);
-            element.selectIndex = i;
-          }
+      for (let index = 0; index < valueData.length; index++) {
+        const element = valueData[index];
+        let selectIndex = treeData.value[index].data.findIndex(
+          (e: { value: string }) => e.value === element
+        );
+        if (selectIndex == -1) {
+          break;
        }
+        selectBar(treeData.value[index].data[selectIndex], selectIndex, index);
      }
-      displayValue.value = data
-        .map((e) => {
-          return e.label;
-        })
-        .join(` ${props.decollator} `);
    } catch (error) {
      console.error(error);
    }
  }
-};
+}

 function getMaxFloor(treeData: any) {
  //let floor = 0;
@ -274,6 +280,7 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
        return e.value;
      })
      .join(props.decollator);
+    watchModelValue.value = false;
    emit("update:modelValue", value);
    let evt = {
      display: displayValue.value,
--- a/package/component/src/component/checkbox/index.less
+++ b/package/component/src/component/checkbox/index.less
@ -79,7 +79,9 @@
  width: 29px;
  height: 28px;
  position: absolute;
-  border: 1px solid var(--global-neutral-color-6);
+  border-top: 1px solid var(--global-neutral-color-6);
+  border-bottom: 1px solid var(--global-neutral-color-6);
+  border-right: 1px solid var(--global-neutral-color-6);
  border-radius: 0 2px 2px 0;
  color: #fff;
  font-size: 20px;
--- a/package/component/src/component/dropdown/index.vue
+++ b/package/component/src/component/dropdown/index.vue
@ -20,7 +20,6 @@ import {
  cloneVNode,
  useAttrs,
  StyleValue,
-  PropType,
 } from "vue";
 import {
  computed,
@ -45,9 +44,8 @@ import {
  DropdownContext,
 } from "./interface";
 import TeleportWrapper from "../_components/teleportWrapper.vue";
-import { useFirstElement, isScrollElement, getScrollElements } from "./util";
-import RenderFunction, { RenderFunc } from "../_components/renderFunction";
-import { transformPlacement } from "./util";
+import { useFirstElement, getScrollElements, transformPlacement } from "./util";
+import RenderFunction from "../_components/renderFunction";

 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";

@ -105,7 +103,6 @@ const dropdownCtx = inject<DropdownContext | undefined>(
  undefined
 );
 const { children, firstElement: dropdownRef } = useFirstElement();
-//const dropdownRef = shallowRef<HTMLElement | undefined>();
 const contentRef = shallowRef<HTMLElement | undefined>();
 const contentStyle = ref<CSSProperties>({});
 const { width: windowWidth, height: windowHeight } = useWindowSize();
--- a/package/component/src/component/dropdown/util.ts
+++ b/package/component/src/component/dropdown/util.ts
@ -1,27 +1,12 @@
 import { DropdownPlacement } from "./interface";

 import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
+import { isArrayChildren, isComponent, isElement } from "../../utils";

 export interface SlotChildren {
  value?: VNode[];
 }

-// Quoted from arco-vue
-// https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/vue-utils.ts
-export enum ShapeFlags {
-  ELEMENT = 1,
-  FUNCTIONAL_COMPONENT = 1 << 1,
-  STATEFUL_COMPONENT = 1 << 2,
-  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
-  TEXT_CHILDREN = 1 << 3,
-  ARRAY_CHILDREN = 1 << 4,
-  SLOTS_CHILDREN = 1 << 5,
-  TELEPORT = 1 << 6,
-  SUSPENSE = 1 << 7,
-  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
-  COMPONENT_KEPT_ALIVE = 1 << 9,
-}
-
 export const isScrollElement = (element: HTMLElement) => {
  return (
    element.scrollHeight > element.offsetHeight ||
@ -41,24 +26,6 @@ export const getScrollElements = (container: HTMLElement | undefined) => {
  return scrollElements;
 };

-export const isElement = (vn: VNode) => {
-  return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
-};
-
-export const isComponent = (
-  vn: VNode,
-  type?: VNodeTypes
-): type is Component => {
-  return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
-};
-
-export const isArrayChildren = (
-  vn: VNode,
-  children: VNode["children"]
-): children is VNode[] => {
-  return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
-};
-
 export const getChildrenArray = (vn: VNode): VNode[] | undefined => {
  if (isArrayChildren(vn, vn.children)) {
    return vn.children;
@ -140,6 +107,5 @@ export const transformPlacement = (
      placementMap[separated[1]] || separated[1]
    }` as DropdownPlacement;
  }
-
  return placement;
 };
--- a/package/component/src/component/iconPicker/index.less
+++ b/package/component/src/component/iconPicker/index.less
@ -53,6 +53,7 @@
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
+  display: inline-block;
 }

 .layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
@ -151,6 +152,15 @@
  display: none;
 }

+.layui-icon-picker-clear {
+  color: rgba(0, 0, 0, 0.45);
+  padding: 0px 0px 0px 10px;
+}
+
+.layui-icon-picker-clear:hover {
+  opacity: 0.6;
+}
+
 .layui-colorpicker-disabled {
  opacity: 0.6;
 }
@ -158,4 +168,8 @@
 .layui-colorpicker-disabled,
 .layui-colorpicker-disabled * {
  cursor: not-allowed !important;
+}
+
+.transform{
+  transform: rotate(180deg);
 }
--- a/package/component/src/component/iconPicker/index.vue
+++ b/package/component/src/component/iconPicker/index.vue
@ -17,6 +17,7 @@ export interface IconPickerProps {
  modelValue?: string;
  disabled?: boolean;
  showSearch?: boolean;
+  allowClear?: boolean;
  contentClass?: string | Array<string | object> | object;
  contentStyle?: StyleValue;
 }
@ -30,6 +31,7 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
 const emit = defineEmits(["update:modelValue", "change"]);
 const selectedIcon = computed(() => props.modelValue);
 const dropdownRef = ref<any>(null);
+const openState = ref<boolean>(false);

 const selectIcon = function (icon: string): void {
  emit("update:modelValue", icon);
@ -37,6 +39,14 @@ const selectIcon = function (icon: string): void {
  dropdownRef.value?.hide();
 };

+const onClear = function (): void {
+  emit("update:modelValue", "");
+};
+
+const hasContent = computed(() => {
+  return props.modelValue != null && props.modelValue != "";
+});
+
 const icones: Ref = ref([]);
 const total: Ref<number> = ref(icons.length);
 const totalPage: Ref<number> = ref(total.value / 12);
@ -143,6 +153,8 @@ const searchList = (str: string, container: any) => {
    :disabled="disabled"
    :contentClass="contentClass"
    :contentStyle="contentStyle"
+    @hide="openState = false"
+    @show="openState = true"
    updateAtScroll
  >
    <div
@ -152,8 +164,17 @@ const searchList = (str: string, container: any) => {
      <div class="layui-inline layui-iconpicker-main">
        <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
      </div>
+      <span
+        class="layui-icon-picker-clear"
+        v-if="allowClear && hasContent && !disabled"
+      >
+        <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
+      </span>
      <span class="layui-inline layui-iconpicker-suffix"
-        ><i class="layui-icon layui-icon-down layui-anim"></i
+        ><i
+          class="layui-icon layui-icon-down"
+          :class="[openState ? 'transform' : '']"
+        ></i
      ></span>
    </div>
    <template #content>
--- a/package/component/src/component/pageHeader/index.vue
+++ b/package/component/src/component/pageHeader/index.vue
@ -1,7 +1,7 @@
 <template>
  <div class="lay-page-header">
    <div class="lay-page-header__left" @click="emits('back')">
-      <slot name="backIcon"
+      <slot :name="backIconSlotName"
        ><i class="layui-icon" :class="[backIcon]"></i
      ></slot>
      <div class="lay-page-header__title">{{ backText }}</div>
@ -19,7 +19,8 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { useSlots } from "vue";
+import { convertSlotName } from "../../utils";
+import { getCurrentInstance, useSlots } from "vue";
 import "./index.less";

 export interface PageHeaderProps {
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
 });

 const emits = defineEmits(["back"]);
-
 const slots = useSlots();
+const instance = getCurrentInstance()!;
+const backIconSlotName = convertSlotName(instance, "backIcon");
 </script>
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@ -18,6 +18,7 @@ import {
  watch,
  onUnmounted,
  StyleValue,
+  Fragment,
 } from "vue";
 import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
@ -25,12 +26,14 @@ import LayTagInput from "../tagInput/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import LaySelectOption, { SelectOptionProps } from "../selectOption/index.vue";
 import { SelectSize } from "./interface";
+import { isArrayChildren } from "../../utils";

 export interface SelectProps {
  name?: string;
  disabled?: boolean;
  placeholder?: string;
  searchPlaceholder?: string;
+  searchMethod?: Function;
  modelValue?: any;
  multiple?: boolean;
  items?: SelectOptionProps[];
@ -73,15 +76,13 @@ var timer: any;

 const getOption = (nodes: VNode[], newOptions: any[]) => {
  nodes?.map((item) => {
-    let component = item.type as Component;
-    if (item.type.toString() == "Symbol(Fragment)") {
+    if (isArrayChildren(item, item.children)) {
      getOption(item.children as VNode[], newOptions);
    } else {
-      if (component.name == LaySelectOption.name) {
+      if ((item.type as Component).name == LaySelectOption.name) {
        if (item.children) {
          // @ts-ignore
          const label = item.children.default()[0].children;
-
          if (typeof label == "string") {
            // @ts-ignore
            item.props.label = label;
@ -122,7 +123,6 @@ const onCompositionend = (event: Event) => {
 onMounted(() => {
  intOption();
  timer = setInterval(intOption, 500);
-
  watch(
    [selectedValue, options],
    () => {
@ -178,11 +178,17 @@ const handleClear = () => {
  }
 };

+const handleHide = () => {
+  searchValue.value = "";
+  openState.value = false;
+};
+
 provide("selectRef", selectRef);
 provide("openState", openState);
 provide("selectedValue", selectedValue);
 provide("searchValue", searchValue);
 provide("multiple", multiple);
+provide("searchMethod", props.searchMethod);
 </script>

 <template>
@ -194,22 +200,27 @@ provide("multiple", multiple);
      :contentStyle="contentStyle"
      :update-at-scroll="true"
      :autoFitWidth="true"
-      @hide="openState = false"
+      @hide="handleHide"
      @show="openState = true"
    >
      <lay-tag-input
        v-if="multiple"
        v-model="multipleValue"
+        v-model:input-value="searchValue"
        :allow-clear="allowClear"
        :placeholder="placeholder"
        :collapseTagsTooltip="collapseTagsTooltip"
        :minCollapsedNum="minCollapsedNum"
-        :disabledInput="true"
        :disabled="disabled"
+        :disabledInput="!showSearch"
        :size="size"
        :class="{ 'layui-unselect': true }"
        @remove="handleRemove"
        @clear="handleClear"
+        @input-value-change="handleSearch"
+        @keyup.delete.capture.prevent.stop
+        @keyup.backspace.capture.prevent.stop
+        @keydown.enter.capture.prevent.stop
      >
        <template #suffix>
          <lay-icon
@ -220,13 +231,13 @@ provide("multiple", multiple);
      </lay-tag-input>
      <lay-input
        v-else
-        :modelValue="singleValue"
-        :placeholder="placeholder"
-        :allow-clear="allowClear"
-        :readonly="!showSearch"
-        :disabled="disabled"
-        :class="{ 'layui-unselect': !showSearch }"
        :size="size"
+        :disabled="disabled"
+        :readonly="!showSearch"
+        :modelValue="singleValue"
+        :allow-clear="allowClear"
+        :placeholder="placeholder"
+        :class="{ 'layui-unselect': !showSearch }"
        @compositionstart="onCompositionstart"
        @compositionend="onCompositionend"
        @Input="handleSearch"
@ -241,17 +252,6 @@ provide("multiple", multiple);
      </lay-input>
      <template #content>
        <dl class="layui-select-content">
-          <div class="layui-select-search" v-if="multiple && showSearch">
-            <lay-input
-              :modelValue="searchValue"
-              :placeholder="searchPlaceholder"
-              @Input="handleSearch"
-              @compositionstart="onCompositionstart"
-              @compositionend="onCompositionend"
-              prefix-icon="layui-icon-search"
-              size="sm"
-            ></lay-input>
-          </div>
          <template v-if="items">
            <lay-select-option
              v-for="(item, index) in items"
--- a/package/component/src/component/selectOption/index.vue
+++ b/package/component/src/component/selectOption/index.vue
@ -30,6 +30,7 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {

 const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>;
+const searchMethod: Function = inject("searchMethod") as Function;
 const selectedValue: WritableComputedRef<any> = inject(
  "selectedValue"
 ) as WritableComputedRef<any>;
@ -59,7 +60,13 @@ const selected = computed(() => {
  }
 });

+const first = ref(true);
+
 const display = computed(() => {
+  if (searchMethod && !first.value) {
+    return searchMethod(searchValue.value, props);
+  }
+  first.value = false;
  return (
    props.keyword?.toString().indexOf(searchValue.value) > -1 ||
    props.label?.toString().indexOf(searchValue.value) > -1
--- a/package/component/src/component/tab/index.less
+++ b/package/component/src/component/tab/index.less
@ -97,8 +97,6 @@
  border-bottom: 1px solid #eeeeee;
 }

-
-
 .layui-tab-title.is-right {
  border-left: 1px solid var(--global-neutral-color-3);
 }
--- a/package/component/src/component/tab/index.vue
+++ b/package/component/src/component/tab/index.vue
@ -29,6 +29,7 @@ import {
 } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { TabData, TabInjectKey, TabPosition } from "./interface";
+import { isArrayChildren } from "../../utils";

 export interface TabProps {
  type?: string;
@ -41,16 +42,15 @@ export interface TabProps {
 }

 const slot = useSlots();
-const childrens: Ref<VNode[]> = ref([]);
 const tabMap = reactive(new Map<number, TabData>());
+const childrens: Ref<VNode[]> = ref([]);

 const setItemInstanceBySlot = function (nodes: VNode[]) {
  nodes?.map((item) => {
-    let component = item.type as Component;
-    if (item.type.toString() == "Symbol(Fragment)") {
+    if (isArrayChildren(item, item.children)) {
      setItemInstanceBySlot(item.children as VNode[]);
    } else {
-      if (component.name == tabItem.name) {
+      if ((item.type as Component).name == tabItem.name) {
        childrens.value.push(item);
      }
    }
@ -265,6 +265,24 @@ const update = () => {
  }
 };

+const horizontalScroll = (e: WheelEvent) => {
+  e.preventDefault();
+  const navSize = getNavSize();
+  const containerSize = navRef.value![`offset${sizeName.value}`];
+  const currentOffset = navOffset.value;
+  const scrollNextSize = scrollNextRef.value?.[`offset${sizeName.value}`] ?? 0;
+  const direction =
+    Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+  const distance = 50 * (direction > 0 ? 1 : -1);
+  const newOffset = Math.max(currentOffset + distance, 0);
+  if (
+    navSize - currentOffset <= containerSize - scrollNextSize &&
+    direction > 0
+  )
+    return;
+  navOffset.value = newOffset;
+};
+
 const renderTabIcon = (attrs: Record<string, unknown>) => {
  const tab = attrs.tabData as TabData;
  if (typeof tab.icon === "function") {
@ -293,7 +311,7 @@ useResizeObserver(navRef, update);

 watch(
  tabMap,
-  function () {
+  () => {
    childrens.value = [];
    setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
  },
@ -335,6 +353,7 @@ provide("active", active);
    >
      <ul
        ref="navRef"
+        @wheel="horizontalScroll"
        :class="[
          'layui-tab-title',
          props.tabPosition ? `is-${tabPosition}` : '',
--- a/package/component/src/component/table/TableRow.vue
+++ b/package/component/src/component/table/TableRow.vue
@ -486,51 +486,58 @@ const radioProps = props.getRadioProps(props.data, props.index);
                column.fixed ? `layui-table-fixed-${column.fixed}` : '',
              ]"
            >
-              <span
-                v-if="expandSpace && columnIndex === expandIndex"
-                :style="{ 'margin-right': currentIndentSize + 'px' }"
-              ></span>
+              <div
+                style="display: flex"
+                :style="[
+                  { textAlign: column.align, justifyContent: column.align },
+                ]"
+              >
+                <span
+                  v-if="expandSpace && columnIndex === expandIndex"
+                  :style="{ 'margin-right': currentIndentSize + 'px' }"
+                ></span>

-              <span
-                v-if="
-                  expandSpace &&
-                  !data[childrenColumnName] &&
-                  !slot.expand &&
-                  columnIndex === expandIndex
-                "
-                class="layui-table-cell-expand-icon-spaced"
-              ></span>
+                <span
+                  v-if="
+                    expandSpace &&
+                    !data[childrenColumnName] &&
+                    !slot.expand &&
+                    columnIndex === expandIndex
+                  "
+                  class="layui-table-cell-expand-icon-spaced"
+                ></span>

-              <lay-icon
-                v-if="
-                  (slot.expand || data[childrenColumnName]) &&
-                  columnIndex === expandIndex
-                "
-                class="layui-table-cell-expand-icon"
-                :type="expandIconType"
-                @click="handleExpand"
-              ></lay-icon>
+                <lay-icon
+                  v-if="
+                    (slot.expand || data[childrenColumnName]) &&
+                    columnIndex === expandIndex
+                  "
+                  class="layui-table-cell-expand-icon"
+                  :type="expandIconType"
+                  @click="handleExpand"
+                ></lay-icon>

-              <lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
-                <slot
-                  :name="column.customSlot"
-                  :data="data"
-                  :column="column"
-                ></slot>
-                <template #content>
+                <lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
                  <slot
                    :name="column.customSlot"
                    :data="data"
                    :column="column"
                  ></slot>
-                </template>
-              </lay-tooltip>
-              <slot
-                v-else
-                :name="column.customSlot"
-                :data="data"
-                :column="column"
-              ></slot>
+                  <template #content>
+                    <slot
+                      :name="column.customSlot"
+                      :data="data"
+                      :column="column"
+                    ></slot>
+                  </template>
+                </lay-tooltip>
+                <slot
+                  v-else
+                  :name="column.customSlot"
+                  :data="data"
+                  :column="column"
+                ></slot>
+              </div>
            </td>
          </template>

@ -558,39 +565,47 @@ const radioProps = props.getRadioProps(props.data, props.index);
                column.fixed ? `layui-table-fixed-${column.fixed}` : '',
              ]"
            >
-              <span
-                v-if="expandSpace && columnIndex === expandIndex"
-                :style="{ 'margin-right': currentIndentSize + 'px' }"
-              ></span>
-
-              <span
-                v-if="
-                  expandSpace &&
-                  !data[childrenColumnName] &&
-                  !slot.expand &&
-                  columnIndex === expandIndex
-                "
-                class="layui-table-cell-expand-icon-spaced"
-              ></span>
-
-              <lay-icon
-                v-if="
-                  (slot.expand || data[childrenColumnName]) &&
-                  columnIndex === expandIndex
-                "
-                class="layui-table-cell-expand-icon"
-                :type="expandIconType"
-                @click="handleExpand"
-              ></lay-icon>
-
-              <lay-tooltip
-                v-if="column.ellipsisTooltip"
-                :content="data[column.key]"
-                :isAutoShow="true"
+              <div
+                style="display: flex"
+                :style="[
+                  { textAlign: column.align, justifyContent: column.align },
+                ]"
              >
-                {{ data[column.key] }}
-              </lay-tooltip>
-              <span v-else> {{ data[column.key] }} </span>
+                <span
+                  v-if="expandSpace && columnIndex === expandIndex"
+                  :style="{ 'margin-right': currentIndentSize + 'px' }"
+                ></span>
+
+                <span
+                  v-if="
+                    expandSpace &&
+                    !data[childrenColumnName] &&
+                    !slot.expand &&
+                    columnIndex === expandIndex
+                  "
+                  class="layui-table-cell-expand-icon-spaced"
+                ></span>
+
+                <lay-icon
+                  v-if="
+                    (slot.expand || data[childrenColumnName]) &&
+                    columnIndex === expandIndex
+                  "
+                  class="layui-table-cell-expand-icon"
+                  :type="expandIconType"
+                  @click="handleExpand"
+                ></lay-icon>
+
+                <lay-tooltip
+                  v-if="column.ellipsisTooltip"
+                  :content="data[column.key]"
+                  :isAutoShow="true"
+                >
+                  {{ data[column.key] }}
+                </lay-tooltip>
+
+                <span v-else> {{ data[column.key] }} </span>
+              </div>
            </td>
          </template>
        </template>
--- a/package/component/src/component/table/index.less
+++ b/package/component/src/component/table/index.less
@ -44,12 +44,11 @@

 .layui-table-mend,
 .layui-table-tool,
-.layui-table-total,
 .layui-table-patch,
 .layui-table-click,
 .layui-table-hover,
 .layui-table-header,
-.layui-table-total tr,
+.layui-table-total td,
 .layui-table thead tr,
 .layui-table tbody tr:hover td,
 .layui-table.layui-table-even tr:nth-child(even) td {
@ -305,6 +304,11 @@
  right: -1px;
 }

+.layui-table-tool-self {
+  display: flex;
+  align-items: center;
+}
+
 .layui-table-col-set {
  position: absolute;
  right: 0;
--- a/package/component/src/component/table/index.vue
+++ b/package/component/src/component/table/index.vue
@ -32,7 +32,7 @@ export interface TableProps {
  page?: Recordable;
  columns: Recordable[];
  dataSource: Recordable[];
-  defaultToolbar?: boolean | Recordable[];
+  defaultToolbar?: boolean | any[];
  selectedKey?: string;
  selectedKeys?: Recordable[];
  indentSize?: number;
@ -60,6 +60,7 @@ const props = withDefaults(defineProps<TableProps>(), {
  childrenColumnName: "children",
  dataSource: () => [],
  selectedKeys: () => [],
+  defaultToolbar: false,
  selectedKey: "",
  maxHeight: "auto",
  even: false,
@ -518,9 +519,6 @@ const childrenExpandSpace = computed(() => {
  );
 });

-/**
- * @remark 排除 hide 列
- */
 const renderFixedStyle = (column: any, columnIndex: number) => {
  if (column.fixed) {
    if (column.fixed == "left") {
@ -563,6 +561,55 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
  return {} as StyleValue;
 };

+/**
+ * @remark 排除 hide 列
+ */
+const renderHeadFixedStyle = (
+  column: any,
+  columnIndex: number,
+  tableHeadColumn: any[]
+) => {
+  if (column.fixed) {
+    if (column.fixed == "left") {
+      var left = 0;
+      for (var i = 0; i < columnIndex; i++) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "left" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
+          left = left + Number(props.columns[i]?.width?.replace("px", ""));
+        }
+      }
+      return { left: `${left}px` } as StyleValue;
+    } else {
+      var right = 0;
+      for (var i = columnIndex + 1; i < props.columns.length; i++) {
+        if (
+          props.columns[i].fixed &&
+          props.columns[i].fixed == "right" &&
+          tableColumnKeys.value.includes(props.columns[i].key)
+        ) {
+          right = right + Number(props.columns[i]?.width?.replace("px", ""));
+        }
+      }
+      return { right: `${right}px` } as StyleValue;
+    }
+  } else {
+    var isLast = true;
+    for (var i = columnIndex + 1; i < tableHeadColumn.length; i++) {
+      if (
+        tableHeadColumn[i].fixed == undefined &&
+        tableColumnKeys.value.includes(tableHeadColumn[i].key)
+      ) {
+        isLast = false;
+      }
+    }
+    return isLast ? ({ "border-right": "none" } as StyleValue) : {};
+  }
+  return {} as StyleValue;
+};
+
 /**
 * @remark 排除 hide 列
 */
@ -628,6 +675,19 @@ const totalRowMethod = (column: any, dataSource: any[]) => {
  return total;
 };

+const showToolbar = (toolbarName: string) => {
+  if (props.defaultToolbar instanceof Array) {
+    return props.defaultToolbar.includes(toolbarName);
+  }
+  return props.defaultToolbar;
+};
+
+const toolbarStyle = (toolbarName: string) => {
+  if (props.defaultToolbar instanceof Array) {
+    return { order: props.defaultToolbar.indexOf(toolbarName) } as StyleValue;
+  }
+};
+
 onBeforeUnmount(() => {
  window.onresize = null;
 });
@ -642,7 +702,12 @@ onBeforeUnmount(() => {
          <slot name="toolbar"></slot>
        </div>
        <div v-if="defaultToolbar" class="layui-table-tool-self">
-          <lay-dropdown updateAtScroll>
+          <!-- 筛选 -->
+          <lay-dropdown
+            v-if="showToolbar('filter')"
+            updateAtScroll
+            :style="toolbarStyle('filter')"
+          >
            <div class="layui-inline" title="筛选" lay-event>
              <i class="layui-icon layui-icon-slider"></i>
            </div>
@ -660,15 +725,28 @@ onBeforeUnmount(() => {
              </div>
            </template>
          </lay-dropdown>
+
+          <!-- 导出 -->
          <div
+            v-if="showToolbar('export')"
            class="layui-inline"
            title="导出"
            lay-event
+            :style="toolbarStyle('export')"
            @click="exportData()"
          >
            <i class="layui-icon layui-icon-export"></i>
          </div>
-          <div class="layui-inline" title="打印" lay-event @click="print()">
+
+          <!-- 打印 -->
+          <div
+            v-if="showToolbar('print')"
+            :style="toolbarStyle('print')"
+            class="layui-inline"
+            title="打印"
+            lay-event
+            @click="print()"
+          >
            <i class="layui-icon layui-icon-print"></i>
          </div>
        </div>
@ -739,7 +817,11 @@ onBeforeUnmount(() => {
                          {
                            textAlign: column.align,
                          },
-                          renderFixedStyle(column, columnIndex),
+                          renderHeadFixedStyle(
+                            column,
+                            columnIndex,
+                            tableHeadColumn
+                          ),
                        ]"
                      >
                        <template v-if="column.type == 'checkbox'">
--- a/package/component/src/component/tag/index.less
+++ b/package/component/src/component/tag/index.less
@ -73,12 +73,10 @@
     }
   }

-   &-ellipsis &-text {
-     display: inline-block;
-     white-space: nowrap;
-     word-wrap: normal;
-     overflow: hidden;
-     text-overflow: ellipsis
+   & &-text {
+      overflow: hidden; 
+      text-overflow: ellipsis; 
+      white-space: nowrap
   }

   & &-close-icon {
--- a/package/component/src/component/tag/index.vue
+++ b/package/component/src/component/tag/index.vue
@ -6,7 +6,7 @@ export default {
 <script lang="ts" setup>
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
-import { computed, ref } from "vue";
+import { computed, nextTick, ref } from "vue";
 import { TinyColor } from "@ctrl/tinycolor";
 import { TagShape, TagType, TagVariant } from "./interface";

@ -49,13 +49,12 @@ const classTag = computed(() => [
    [`layui-tag-${props.type}`]: props.type,
    "layui-tag-bordered": props.bordered,
    "layui-tag-disabled": props.disabled,
-    "layui-tag-ellipsis": props.maxWidth,
  },
 ]);

 const styleTag = computed(() => [
  {
-    "max-width": props.maxWidth ?? "unset",
+    "max-width": props.maxWidth ?? "100%",
    ...useTagCustomStyle(props).value,
  },
 ]);
@ -105,10 +104,9 @@ function useTagCustomStyle(props: TagProps) {
    <span v-if="$slots.icon" class="layui-tag-icon">
      <slot name="icon" />
    </span>
-    <span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
+    <span class="layui-tag-text">
      <slot />
    </span>
-    <slot v-else />
    <span
      v-if="closable"
      class="layui-tag-close-icon"
--- a/package/component/src/component/tagInput/index.less
+++ b/package/component/src/component/tagInput/index.less
@ -86,7 +86,7 @@
    display: flex;
    align-items: center;
    flex-wrap: wrap;
-    width: fit-content;
+    width: 100%;
    height: auto;
    overflow: hidden;

@ -108,6 +108,9 @@
      .layui-tag-input-inner-input {
        height: @@height - (@@inner-padding + @tag-input-boeder)* 2;
        vertical-align: middle;
+        &:disabled {
+          background: transparent;
+        }
      }

      .layui-tag-input-inner {
--- a/package/component/src/component/tagInput/index.vue
+++ b/package/component/src/component/tagInput/index.vue
@ -300,24 +300,22 @@ defineExpose({
          </template>
        </LayToopTip>
      </template>
-      <template v-if="!disabledInput">
-        <input
-          ref="inputRefEl"
-          class="layui-tag-input-inner-input"
-          :style="inputStyle"
-          :disabled="disabled"
-          :placeholder="placeholder"
-          :readonly="readonly"
-          @keydown.enter="handleEnter"
-          @keyup="handleBackspaceKeyUp"
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @compositionstart="handleComposition"
-          @compositionupdate="handleComposition"
-          @compositionend="handleComposition"
-        />
-      </template>
+      <input
+        ref="inputRefEl"
+        class="layui-tag-input-inner-input"
+        :style="inputStyle"
+        :disabled="disabled || disabledInput"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        @keydown.enter="handleEnter"
+        @keyup="handleBackspaceKeyUp"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
+      />
    </span>
    <span
      v-if="allowClear && tagData?.length && !disabled"
--- a/package/component/src/component/textarea/index.less
+++ b/package/component/src/component/textarea/index.less
@ -18,6 +18,8 @@
  padding: 6px 10px;
  resize: vertical;
  position: relative;
+  transition: none;
+  -webkit-transition: none;
 }

 .layui-textarea-wrapper { 
--- a/package/component/src/component/textarea/index.vue
+++ b/package/component/src/component/textarea/index.vue
@ -6,7 +6,8 @@ export default {

 <script setup lang="ts">
 import { LayIcon } from "@layui/icons-vue";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
+import { isObject } from "@vueuse/shared";
 import "./index.less";

 export interface TextareaProps {
@ -17,6 +18,7 @@ export interface TextareaProps {
  showCount?: boolean;
  allowClear?: boolean;
  maxlength?: number;
+  autosize?: boolean | { minHeight: number; maxHeight: number };
 }

 const props = defineProps<TextareaProps>();
@ -31,6 +33,7 @@ interface TextareaEmits {
 }

 const emit = defineEmits<TextareaEmits>();
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const composing = ref(false);

 const onInput = function (event: Event) {
@ -78,11 +81,31 @@ const wordCount = computed(() => {
  }
  return count;
 });
+
+watch(
+  [() => props.modelValue, textareaRef],
+  () => {
+    if (!textareaRef.value || !props.autosize) return;
+    const height: number = textareaRef.value?.scrollHeight + 2; // 边框
+    if (isObject(props.autosize)) {
+      const { minHeight, maxHeight } = props.autosize;
+      if (height < minHeight || height > maxHeight) return;
+    }
+    textareaRef.value!.style.height = "1px";
+    textareaRef.value!.style.height = `${
+      textareaRef.value?.scrollHeight + 2
+    }px`;
+  },
+  {
+    immediate: true,
+  }
+);
 </script>

 <template>
  <div class="layui-textarea-wrapper">
    <textarea
+      ref="textareaRef"
      class="layui-textarea"
      :value="modelValue"
      :placeholder="placeholder"
--- a/package/component/src/theme/variable.less
+++ b/package/component/src/theme/variable.less
@ -29,5 +29,7 @@
  --global-neutral-color-7: #cccccc;
  
  --global-neutral-color-8: #c2c2c2;
+  
+  --darkreader-border--global-primary-color: #0d796f;

 }
--- a/package/component/src/utils/index.ts
+++ b/package/component/src/utils/index.ts
@ -1,3 +1,4 @@
 export * from "./domUtil";
 export * from "./withInstall";
 export * from "./arrayUtil";
+export * from "./vueUtil";
--- a/package/component/src/utils/vueUtil.ts
+++ b/package/component/src/utils/vueUtil.ts
@ -0,0 +1,57 @@
+import { Component, ComponentInternalInstance, VNode, VNodeTypes } from "vue";
+
+export enum ShapeFlags {
+  ELEMENT = 1,
+  FUNCTIONAL_COMPONENT = 1 << 1,
+  STATEFUL_COMPONENT = 1 << 2,
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
+  TEXT_CHILDREN = 1 << 3,
+  ARRAY_CHILDREN = 1 << 4,
+  SLOTS_CHILDREN = 1 << 5,
+  TELEPORT = 1 << 6,
+  SUSPENSE = 1 << 7,
+  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
+  COMPONENT_KEPT_ALIVE = 1 << 9,
+}
+
+export const isElement = (vn: VNode) => {
+  return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
+};
+
+export const isComponent = (
+  vn: VNode,
+  type?: VNodeTypes
+): type is Component => {
+  return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
+};
+
+export const isArrayChildren = (
+  vn: VNode,
+  children: VNode["children"]
+): children is VNode[] => {
+  return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
+};
+
+/**
+ * 同时支持驼峰命名和破折号命名的插槽，示例：back-icon 和 backIcon
+ * @param vm 组件实例
+ * @param name 插槽名
+ */
+export function convertSlotName(vm: ComponentInternalInstance, name: string) {
+  const camelCaseName = camelCase(name);
+  const kebabCaseName = kebabCase(name);
+  return vm.slots[camelCaseName]
+    ? camelCaseName
+    : vm.slots[kebabCaseName]
+    ? kebabCaseName
+    : name;
+}
+
+export function camelCase(str: string) {
+  return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ""));
+}
+
+export function kebabCase(key: string) {
+  const result = key.replace(/([A-Z])/g, " $1").trim();
+  return result.split(" ").join("-").toLowerCase();
+}
--- a/package/document-component/src/document/zh-CN/components/animation.md
+++ b/package/document-component/src/document/zh-CN/components/animation.md
@ -10,7 +10,7 @@
 ::: title 基础使用
 :::

-::: demo
+::: demo 如上是不同的动画类名，点击上述绿色块，可直接预览动画。

 <template>
  <div class="anim">
--- a/package/document-component/src/document/zh-CN/components/button.md
+++ b/package/document-component/src/document/zh-CN/components/button.md
@ -10,7 +10,7 @@
 ::: title 基础使用
 :::

-::: demo 使用 `lay-button` 标签, 创建一个按钮
+::: demo 使用 `lay-button` 标签, 创建一个按钮。

 <template>
  <lay-button type="primary">原始按钮</lay-button>
@ -37,7 +37,7 @@ export default {
 ::: title 简约按钮
 :::

-::: demo 使用 `border` 属性设置边框颜色
+::: demo 通过 `border` 属性设置边框颜色

 <template>
  <lay-button>原始按钮</lay-button>
@ -64,7 +64,7 @@ export default {
 ::: title 次要按钮
 :::

-::: demo 使用 `border-style` 属性设置边框样式
+::: demo 通过 `border-style` 属性设置边框样式。

 <template>
  <lay-button border-style="dashed">原始按钮</lay-button>
@ -91,7 +91,7 @@ export default {
 ::: title 按钮尺寸
 :::

-::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
+::: demo 通过 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`。

 <template>
  <lay-button type="primary" size="lg">原始按钮</lay-button>
@ -119,7 +119,7 @@ export default {
 ::: title 流式按钮
 :::

-::: demo 使用 `fluid` 属性, 使其适合父最大宽度
+::: demo 通过 `fluid` 属性, 使其适合父级最大宽度。

 <template>
  <lay-button type="primary" fluid>最大化按钮</lay-button>
@ -145,7 +145,7 @@ export default {
 ::: title 圆角按钮
 :::

-::: demo 使用 `radius` 属性，创建圆角按钮
+::: demo 通过 `radius` 属性，创建圆角按钮。

 <template>
  <lay-button type="primary" radius>原始按钮</lay-button>
@ -173,7 +173,7 @@ export default {
 ::: title 按钮分组
 :::

-::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
+::: demo 使用 `lay-button-group` 标签, 创建一个按钮组。

 <template>
  <div>
@ -212,7 +212,7 @@ export default {
 ::: title 图标按钮
 :::

-::: demo 结合 `lay-icon` 组件, 创建图标按钮
+::: demo 结合 `lay-icon` 组件, 创建图标按钮。

 <template>
  <lay-button-container>
@ -239,7 +239,7 @@ export default {
 ::: title 按钮容器
 :::

-::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
+::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器。

 <template>
  <lay-button-container>
@ -266,7 +266,7 @@ export default {
 ::: title 加载按钮
 :::

-::: demo 使用 `loading` 属性, 控制按钮的加载状态
+::: demo 通过 `loading` 属性, 控制按钮的加载状态。

 <template>
  <lay-button-container>
@ -296,7 +296,7 @@ export default {
 ::: title 事件处理
 :::

-::: demo 使用 `@click` 设置单击回调
+::: demo 使用 `@click` 设置单击回调。

 <template>
  <lay-button type="default" @click="clickHandle">单击事件</lay-button>
--- a/package/document-component/src/document/zh-CN/components/cascader.md
+++ b/package/document-component/src/document/zh-CN/components/cascader.md
@ -336,9 +336,11 @@ const valueLv=ref(null)
 :::
 ::: demo 使用 `默认插槽` 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值，同时你也可以使用`动态插槽名`来自定义你想要展示的内容，只需要在传入的数据中加入 `slot`参数，然后愉快的使用插槽自定义内容
 <template>
-  <lay-cascader :options="options" v-model="value2" @change="onChange">
-     <lay-button type="normal">Click me ❤️</lay-button>
-     <lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
+  <lay-cascader :options="options" v-model="value2" @change="onChange" style="width:350px;">
+    <div style='display:flex;align-items:center'>
+      <lay-button type="normal">Click me ❤️</lay-button>
+      <lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
+    </div>
  </lay-cascader>
  <lay-cascader :options="options2" v-model="value" placeholder="动态插槽案例" style="width:250px;margin-left:20px">
    <template #Guide>🤨😐😑😶😏😒🙄😬🤥😌</template>
--- a/package/document-component/src/document/zh-CN/components/icon.md
+++ b/package/document-component/src/document/zh-CN/components/icon.md
@ -10,7 +10,7 @@
 ::: title 基础使用
 :::

-::: demo 使用 `color` 属性设置颜色
+::: demo 使用 `lay-icon` 标签创建一个图标。

 <template>
  <lay-icon type="layui-icon-face-smile"></lay-icon> &nbsp;
--- a/package/document-component/src/document/zh-CN/components/iconPicker.md
+++ b/package/document-component/src/document/zh-CN/components/iconPicker.md
@ -59,6 +59,32 @@ export default {

 :::

+::: title 选择清空
+:::
+
+::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+
+<template>
+  <lay-icon-picker v-model="icon" :allow-clear="true"></lay-icon-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const icon = ref("layui-icon-home")
+
+    return {
+      icon
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 开启分页
 :::

@ -116,12 +142,13 @@ export default {

 ::: table

-|            |          |     |   |   |
+| 属性           |  说明        |  类型   | 默认值  | 可选值  |
 | ---------- | -------- | --- |--- |--- |
 | v-model    | 默认值   | --  |--  |--  |
 | page       | 开启分页 | --  |--  |--  |
 | showSearch | 启用搜索 | --  |--  |--  |
 | disabled | 禁用 | `boolean`  |--  |--  |
+| allow-clear | 允许清空 | `boolean`  |--  |--  |
 | contentStyle             | 内容自定义样式     | `StyleValue` | -- | -- |
 | contentClass             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |

--- a/package/document-component/src/document/zh-CN/components/select.md
+++ b/package/document-component/src/document/zh-CN/components/select.md
@ -4,16 +4,16 @@
 ::: title 基本介绍
 :::

-::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
+::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。
 :::

 ::: title 基础使用
 :::

-::: demo 使用 `lay-select` 标签, 创建下拉选择框
+::: demo 使用 `lay-select` 标签, 创建下拉选择框。

 <template>
-  <lay-select v-model="value">
+  <lay-select v-model="value" placeholder="请选择">
    <lay-select-option :value="1" label="学习"></lay-select-option>
    <lay-select-option :value="2" label="编码"></lay-select-option>
    <lay-select-option :value="3" label="运动"></lay-select-option>
@ -35,61 +35,17 @@ export default {

 :::

-::: title 进阶使用
-:::
-
-::: demo 根据 v-model 的特性, 通过修改值更改 select 的下拉选项。
-
-<template>
-  <lay-space>
-    <lay-select v-model="value2">
-      <lay-select-option :value="1" label="学习"></lay-select-option>
-      <lay-select-option :value="2" label="编码"></lay-select-option>
-      <lay-select-option :value="3" label="运动"></lay-select-option>
-    </lay-select>
-    <lay-button @click="change2"> change ：{{value2}} </lay-button>
-  </lay-space>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const value2 = ref(null);
-    var i = 1;
-    function change2(){
-      value2.value=i++%3+1
-    }
-    return {
-      value2,
-      change2
-    }
-  }
-}
-</script>
-
-:::
-
-
 ::: title 禁止选择
 :::

-::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
+::: demo 通过 `disabled` 属性, 禁用下拉选择。

 <template>
-  <lay-space>
-    <lay-select v-model="value3" :disabled="true" :allow-clear="true">
+  <lay-select v-model="value2" :disabled="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
-    <lay-select v-model="value4" :disabled="true" :multiple="true" :allow-clear="true">
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-  </lay-space>
 </template>

 <script>
@ -98,11 +54,10 @@ import { ref } from 'vue'
 export default {
  setup() {

-    const value3 = ref('1')
-    const value4 = ref(['1'])
+    const value2 = ref('1')
+
    return {
-      value3,
-      value4
+      value2
    }
  }
 }
@ -113,21 +68,14 @@ export default {
 ::: title 开启检索
 :::

-::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
+::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部, 同时你可以使用 search-method 属性自定义搜索逻辑。

 <template>
-  <lay-space>
-    <lay-select v-model="value3" :show-search="true">
+  <lay-select v-model="value3" :show-search="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
-    <lay-select v-model="value4" :show-search="true" :multiple="true">
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-  </lay-space>
 </template>

 <script>
@ -137,11 +85,9 @@ export default {
  setup() {

    const value3 = ref('1')
-    const value4 = ref(['1'])
 
    return {
      value3,
-      value4,
    }
  }
 }
@ -152,10 +98,10 @@ export default {
 ::: title 传入选项
 :::

-::: demo 传入 options 数据，如果设置则不需要手动构造 selectOption 节点
+::: demo 传入 options 数据，如果设置则不需要手动构造 select-option 节点。

 <template>
-  <lay-select v-model="value5" :items="items5"></lay-select>
+  <lay-select v-model="value4" :items="items4"></lay-select>
 </template>

 <script>
@ -163,15 +109,17 @@ import { ref } from 'vue'

 export default {
  setup() {
-    const value5 = ref('1');
-    const items5=ref([
+    const value4 = ref('1');
+
+    const items4=ref([
      {label:'选项1', value:1},
      {label:'选项2', value:2},
      {label:'选项3', value:3, disabled:true},
    ])
+
    return {
-      items5,
-      value5,
+      items4,
+      value4,
    }
  }
 }
@ -185,46 +133,11 @@ export default {
 ::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。

 <template>
-  <lay-space>
-    <lay-select v-model="value3" :allow-clear="true">
+  <lay-select v-model="value5" :allow-clear="true">
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码"></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
  </lay-select>
-    <lay-select v-model="value4" :allow-clear="true" :multiple="true">
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-  </lay-space>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const value3 = ref('1')
-    const value4 = ref(['1'])
-    return {
-      value3,
-      value4
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 海量数据 
-:::
-
-::: demo
-<template>
-  <lay-select v-model="selected2" :multiple="true">
-    <lay-select-option v-for="index of count2" :value="index" :label="index"></lay-select-option>
-  </lay-select>
 </template>

 <script>
@ -233,31 +146,24 @@ import { ref } from 'vue'
 export default {
  setup() {

-    const count2 = ref(0)
-    const selected2 = ref([1])
-
-    setTimeout(() => {
-      count2.value = 100;
-    }, 2000);
+    const value5 = ref('1')

    return {
-      count2,
-      selected2
+      value5
    }
  }
 }
 </script>
+
 :::

-::: title 多选使用
+::: title 开启多选
 :::

-::: demo
+::: demo 通过 `multiple` 属性, 开启多选模式。
+
 <template>
-  <lay-button @click="mvalue=['1','5','7']">点击切换(当前值:{{mvalue.join()}})</lay-button>
-  <br/>
-  <br/>
-  <lay-select v-model="mvalue" @change="change" multiple>
+  <lay-select v-model="value6" multiple>
    <lay-select-option value="1" label="学习"></lay-select-option>
    <lay-select-option value="2" label="编码" disabled></lay-select-option>
    <lay-select-option value="3" label="运动"></lay-select-option>
@ -273,23 +179,20 @@ import { ref,watch } from 'vue'

 export default {
  setup() {
-    const mvalue = ref(['1','2']);
-    const change = function(val){
-      console.log(val, mvalue.value)
-    }
+    const value6 = ref(['1','2']);
+
    return {
-      mvalue,
-      change
+      value6
    }
  }
 }
 </script>
 :::

-::: title 定制选项
+::: title 使用插槽
 :::

-::: demo 使用 `lay-select` 标签, 创建下拉选择框
+::: demo 通过 `default` 插槽, 实现选项的自定义渲染。

 <template>
  <lay-select v-model="value">
@ -314,7 +217,6 @@ export default {

 :::

-
 ::: title Select 属性
 :::

@ -328,6 +230,8 @@ export default {
 | disabled     | 是否禁用              | `boolean`                  | `true` `false` | `false` |
 | multiple     | 是否为多选            | `boolean`                  | `true` `false` | `false` |
 | size         | 尺寸                  | `string`                  | `lg` `md` `sm` `xs`| `md` |
+| showSearch        | 开启搜索     | `boolean` | -- | -- |
+| searchMethod        | 自定义搜索逻辑 (text, optionProps)    | `Function` | -- | -- |
 | searchPlaceholder | 搜索提示          | `string`                  | -- | -- |
 | minCollapsedNum        | 多选模式最小折叠数量                  | `number`                  | -- | -- |
 | collapseTagsTooltip    | 多选折叠后时候悬浮展示                  | `boolean`                  | -- | -- |
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@ -13,7 +13,7 @@
 ::: demo 使用 `lay-table` 标签, 创建表格

 <template>
-  <lay-table :columns="columns1" :data-source="dataSource1"></lay-table>
+  <lay-table :columns="columns66" :data-source="dataSource1"></lay-table>
 </template>

 <script>
@ -22,7 +22,7 @@ import { ref } from 'vue'
 export default {
  setup() {

-    const columns1 = [
+    const columns66 = [
      {
        title:"账户",
        width:"200px",
@ -50,7 +50,7 @@ export default {
    ]

    return {
-      columns1,
+      columns66,
      dataSource1
    }
  }
@ -299,7 +299,7 @@ export default {
        title:"姓名",
        width:"200px",
        key:"name",
-        ellipsisTooltip: true,
+        ellipsisTooltip: true
      },{
        title:"成绩",
        width: "180px",
@ -1270,25 +1270,31 @@ export default {
        title:"名称",
        width:"200px",
        key:"username"
-      },{
+      },
+      {
        title:"地址",
        children: [
          { title: "省", key: "province", width: "300px" },
          { title: "市", key: "city", width: "300px" },
          { title: "区", key: "area", width: "300px" },
        ]
-      },{
-        title:"性别",
-        key:"sex"
-      },{
-        title:"年龄",
-        width: "300px",
-        key:"age"
-      },{
+      },
+      {
        title:"备注",
        width: "180px",
        key:"remark",
-        ellipsisTooltip: true
+        ellipsisTooltip: true,
+        children: [
+          {
+            title:"性别",
+            key:"sex"
+          },{
+            title:"年龄",
+            width: "300px",
+            totalRow:"统计",
+            key:"age"
+          }
+        ]
      }
    ]

@ -1424,7 +1430,7 @@ export default {

    const selectedKeys5 = ref(['1'])
    const checkbox5 = ref(true)
-    const defaultToolbar5 = ref(true)
+    const defaultToolbar5 = ref(['export','print'])
    const maxHeight5 = ref('600px');

    const page5 = {
--- a/package/document-component/src/document/zh-CN/components/tag.md
+++ b/package/document-component/src/document/zh-CN/components/tag.md
@ -14,7 +14,7 @@

 <template>
  <lay-space size="md">
-    <lay-tag>标签</lay-tag>
+    <lay-tag maxWidth="100px">标签</lay-tag>
    <lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
  </lay-space>
 </template>
@ -164,10 +164,11 @@ export default {
  <template v-for="(tag, index) of tagData" :key="`tag-${index}`">
  <lay-tag 
    closable
+    maxWidth="100px"
    @close="handleClose(index)"
    style="margin-right: 5px;"
    >
-    {{tag}}
+    {{tag}} 
  </lay-tag>
  </template>
  <span id="tagDemo" @click="handlerFocus">
@ -195,7 +196,7 @@ import { ref, nextTick } from 'vue';

 export default {
  setup() {
-    const tagData = ref(['Tag', 'Selected', 'Tags']);
+    const tagData = ref(['Tag', 'Selected1111111111111111111111111111111', 'Tags']);
    const inputRef = ref(null);
    const showInput = ref(false);
    const inputVal = ref('');
--- a/package/document-component/src/document/zh-CN/components/transition.md
+++ b/package/document-component/src/document/zh-CN/components/transition.md
@ -36,7 +36,7 @@ const changeVisible = () => {
 ::: title 淡入淡出
 :::

-::: demo 使用 `type` 属性，设置过渡方式。
+::: demo 通过 `type` 属性，设置你要采用的过渡效果。

 <template>
  <lay-button @click="changeVisible1">开始</lay-button>
--- a/package/document-component/src/document/zh-CN/components/upload.md
+++ b/package/document-component/src/document/zh-CN/components/upload.md
@ -46,12 +46,12 @@ export default {
 ::: title 手动上传
 :::

-::: demo 使用 `lay-upload` 标签, 创建一个上传按钮
+::: demo 通过设置 `auto` 属性为 `false`, 使用 `v-model` 接收选择的文件对象。

 <template>
  <lay-upload url="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model="file1" field="file" :auto="false">
    <template #preview>
-      {{ file1 }}
+      {{ file1[0]?.name }}
    </template>
  </lay-upload>
 </template>
@ -62,7 +62,7 @@ import { ref,reactive } from 'vue'
 export default {
   setup() {

-    const file1 = ref();
+    const file1 = ref([]);

     return {
      file1
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -11,6 +11,65 @@
 <template>
 <lay-timeline>
  <lay-timeline-item title="1.7.x">
+      <ul> 
+      <a name="1-7-11"></a> 
+      <li> 
+        <h3>1.7.11 <span class="layui-badge-rim">2022-12-05</span></h3> 
+        <ul>
+          <li>[新增] tab 组件鼠标滚动功能, 兼容移动端 touch 事件。</li>
+          <li>[新增] textarea 组件 autosize 属性, 根据内容自适应大小。</li>
+          <li>[新增] icon-picker 组件 allow-clear 属性, 开启清空操作。</li>
+          <li>[修复] button 组件 夜间模式 下, 普通按钮边框高亮与背景色不一致的问题。</li>
+          <li>[修复] cascader 组件 v-model 属性不为空时, 无法正常回显。</li>
+          <li>[修复] select 组件 muilpart 为 true 时候 placeholder 属性无效。</li>
+          <li>[修复] page-header 组件 backIcon 插槽 html 中使用无效。</li>
+          <li>[优化] checkbox 组件 默认主题 下, 勾选框多余的左边框。</li>
+          <li>[优化] icon-picker 组件 下拉 图标, 在打开关闭时赋予不同的状态。</li>
+          <li>[优化] table 组件 .layui-table-total 背景色 fixed 字段不生效的问题。</li>
+          <li>[优化] layer 组件 success 回调执行时机。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-7-10"></a> 
+      <li> 
+        <h3>1.7.10 <span class="layui-badge-rim">2022-11-30</span></h3> 
+        <ul>
+          <li>[修复] select 组件 search-method 属性, 自定义搜索逻辑不生效。</li>
+          <li>[优化] select 组件文档, 简化使用案例。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-7-9"></a> 
+      <li> 
+        <h3>1.7.9 <span class="layui-badge-rim">2022-11-22</span></h3> 
+        <ul>
+          <li>[新增] select 组件 search-method 属性, 允许自定义搜索逻辑。</li>
+          <li>[修复] tag 组件 max-width 属性, 内容超出后 `...` 省略符缺失。</li>
+          <li>[修复] table 组件 column 属性 align 配置失效, 该问题仅存在 1.7.8 版本。</li>
+          <li>[修复] select 组件 build 后, 选中内容无法正确回显。</li>
+          <li>[修复] tab 组件 build 后, tab-item 无法正确显示, 在嵌套 v-for 时。</li>
+          <li>[修复] table 组件 default-toolbar 在配置数组时, 未按顺序渲染。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-7-8"></a> 
+      <li> 
+        <h3>1.7.8 <span class="layui-badge-rim">2022-11-19</span></h3> 
+        <ul>
+          <li>[新增] upload 组件 auto 属性, 是否自动上传配置。</li>
+          <li>[修复] table 组件 ellipsisTooltip 属性不生效。</li>
+          <li>[优化] backtop 组件部分浏览器版本无法正常返回顶部。</li>
+          <li>[优化] date-picker 组件 btn 操作 border-radius 样式细节。</li>
+          <li>[优化] tag-input 组件 maxWidth 属性默认为 100%。</li>
+          <li>[优化] tag-input 组件 tagWidth 超出 input 宽度时自动省略文本。</li>
+          <li>[优化] table 组件 default-toolbar 属性支持 Array 类型, 举例：['print']。</li>
+          <li>[优化] select 组件 dropdown 关闭时统一清空 search 内容。</li>
+        </ul> 
+      </li>
+    </ul>
    <ul> 
      <a name="1-7-7"></a> 
      <li> 
--- a/package/document-component/src/view/index.vue
+++ b/package/document-component/src/view/index.vue
@ -32,7 +32,7 @@
          >
          <span
            >{{ t("home.download") }}：<em class="site-showdowns"
-              >35,223</em
+              >39,044</em
            ></span
          >
        </div>
@ -43,7 +43,7 @@
            rel="nofollow"
            class="site-star"
          >
-            <i class="layui-icon"></i> Star <cite id="getStars">1633</cite>
+            <i class="layui-icon"></i> Star <cite id="getStars">1710</cite>
          </a>
          <a
            href="https://gitee.com/layui-vue"
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@ -337,7 +337,7 @@ watch(
      props.success();
    }
  },
-  { immediate: true }
+  { immediate: true, flush: "post" }
 );

 watch(