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

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" />

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" />

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",

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 === "") {
+    if (watchModelValue.value) {
-      onClear();
+      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 < valueData.length; index++) {
-      for (let index = 0; index < treeData.value.length; index++) {
+        const element = valueData[index];
-        const element = treeData.value[index];
+        let selectIndex = treeData.value[index].data.findIndex(
-        const nowValue = valueData[index];
+          (e: { value: string }) => e.value === element
-        for (let i = 0; i < element.length; i++) {
+        );
-          const ele = element[i];
+        if (selectIndex == -1) {
-          if (nowValue === ele.value) {
+          break;
-            data.push(ele);
-            element.selectIndex = i;
-          }
         }
+        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,

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;

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 { useFirstElement, getScrollElements, transformPlacement } from "./util";
-import RenderFunction, { RenderFunc } from "../_components/renderFunction";
+import RenderFunction from "../_components/renderFunction";
-import { transformPlacement } from "./util";
 
 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();

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;
 };

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);
 }

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>

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>

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 (isArrayChildren(item, item.children)) {
-    if (item.type.toString() == "Symbol(Fragment)") {
       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"

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

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);
 }

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 (isArrayChildren(item, item.children)) {
-    if (item.type.toString() == "Symbol(Fragment)") {
       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}` : '',

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
+              <div
-                v-if="expandSpace && columnIndex === expandIndex"
+                style="display: flex"
-                :style="{ 'margin-right': currentIndentSize + 'px' }"
+                :style="[
-              ></span>
+                  { textAlign: column.align, justifyContent: column.align },
+                ]"
+              >
+                <span
+                  v-if="expandSpace && columnIndex === expandIndex"
+                  :style="{ 'margin-right': currentIndentSize + 'px' }"
+                ></span>
 
-              <span
+                <span
-                v-if="
+                  v-if="
-                  expandSpace &&
+                    expandSpace &&
-                  !data[childrenColumnName] &&
+                    !data[childrenColumnName] &&
-                  !slot.expand &&
+                    !slot.expand &&
-                  columnIndex === expandIndex
+                    columnIndex === expandIndex
-                "
+                  "
-                class="layui-table-cell-expand-icon-spaced"
+                  class="layui-table-cell-expand-icon-spaced"
-              ></span>
+                ></span>
 
-              <lay-icon
+                <lay-icon
-                v-if="
+                  v-if="
-                  (slot.expand || data[childrenColumnName]) &&
+                    (slot.expand || data[childrenColumnName]) &&
-                  columnIndex === expandIndex
+                    columnIndex === expandIndex
-                "
+                  "
-                class="layui-table-cell-expand-icon"
+                  class="layui-table-cell-expand-icon"
-                :type="expandIconType"
+                  :type="expandIconType"
-                @click="handleExpand"
+                  @click="handleExpand"
-              ></lay-icon>
+                ></lay-icon>
 
-              <lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
+                <lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
-                <slot
-                  :name="column.customSlot"
-                  :data="data"
-                  :column="column"
-                ></slot>
-                <template #content>
                   <slot
                     :name="column.customSlot"
                     :data="data"
                     :column="column"
                   ></slot>
-                </template>
+                  <template #content>
-              </lay-tooltip>
+                    <slot
-              <slot
+                      :name="column.customSlot"
-                v-else
+                      :data="data"
-                :name="column.customSlot"
+                      :column="column"
-                :data="data"
+                    ></slot>
-                :column="column"
+                  </template>
-              ></slot>
+                </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
+              <div
-                v-if="expandSpace && columnIndex === expandIndex"
+                style="display: flex"
-                :style="{ 'margin-right': currentIndentSize + 'px' }"
+                :style="[
-              ></span>
+                  { textAlign: column.align, justifyContent: column.align },
-
+                ]"
-              <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] }}
+                <span
-              </lay-tooltip>
+                  v-if="expandSpace && columnIndex === expandIndex"
-              <span v-else> {{ data[column.key] }} </span>
+                  :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>

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;

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'">

package/component/src/component/tag/index.less

@@ -73,12 +73,10 @@
      }
    }
 
-   &-ellipsis &-text {
+   & &-text {
-     display: inline-block;
+      overflow: hidden; 
-     white-space: nowrap;
+      text-overflow: ellipsis; 
-     word-wrap: normal;
+      white-space: nowrap
-     overflow: hidden;
-     text-overflow: ellipsis
    }
 
    & &-close-icon {

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"

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 {

package/component/src/component/tagInput/index.vue

@@ -300,24 +300,22 @@ defineExpose({
           </template>
         </LayToopTip>
       </template>
-      <template v-if="!disabledInput">
+      <input
-        <input
+        ref="inputRefEl"
-          ref="inputRefEl"
+        class="layui-tag-input-inner-input"
-          class="layui-tag-input-inner-input"
+        :style="inputStyle"
-          :style="inputStyle"
+        :disabled="disabled || disabledInput"
-          :disabled="disabled"
+        :placeholder="placeholder"
-          :placeholder="placeholder"
+        :readonly="readonly"
-          :readonly="readonly"
+        @keydown.enter="handleEnter"
-          @keydown.enter="handleEnter"
+        @keyup="handleBackspaceKeyUp"
-          @keyup="handleBackspaceKeyUp"
+        @input="handleInput"
-          @input="handleInput"
+        @focus="handleFocus"
-          @focus="handleFocus"
+        @blur="handleBlur"
-          @blur="handleBlur"
+        @compositionstart="handleComposition"
-          @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
-          @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
-          @compositionend="handleComposition"
+      />
-        />
-      </template>
     </span>
     <span
       v-if="allowClear && tagData?.length && !disabled"

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 { 

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"

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;
 
 }

package/component/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./domUtil";
 export * from "./withInstall";
 export * from "./arrayUtil";
+export * from "./vueUtil";

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();
+}

package/document-component/src/document/zh-CN/components/animation.md

@@ -10,7 +10,7 @@
 ::: title 基础使用
 :::
 
-::: demo
+::: demo 如上是不同的动画类名，点击上述绿色块，可直接预览动画。
 
 <template>
   <div class="anim">

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>

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-cascader :options="options" v-model="value2" @change="onChange" style="width:350px;">
-     <lay-button type="normal">Click me ❤️</lay-button>
+    <div style='display:flex;align-items:center'>
-     <lay-badge theme="orange" v-if="displayValue" style="margin-left:10px">{{displayValue}}</lay-badge>
+      <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>

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;

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` | -- | -- |
 

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="value2" :disabled="true">
-    <lay-select v-model="value3" :disabled="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-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 value2 = ref('1')
-    const value4 = ref(['1'])
+
     return {
-      value3,
+      value2
-      value4
     }
   }
 }
@@ -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 value4 = ref('1');
-    const items5=ref([
+
+    const items4=ref([
       {label:'选项1', value:1},
       {label:'选项2', value:2},
       {label:'选项3', value:3, disabled:true},
     ])
+
     return {
-      items5,
+      items4,
-      value5,
+      value4,
     }
   }
 }
@@ -185,46 +133,11 @@ export default {
 ::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
 
 <template>
-  <lay-space>
+  <lay-select v-model="value5" :allow-clear="true">
-    <lay-select v-model="value3" :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 value5 = ref('1')
-    const selected2 = ref([1])
-
-    setTimeout(() => {
-      count2.value = 100;
-    }, 2000);
 
     return {
-      count2,
+      value5
-      selected2
     }
   }
 }
 </script>
+
 :::
 
-::: title 多选使用
+::: title 开启多选
 :::
 
-::: demo
+::: demo 通过 `multiple` 属性, 开启多选模式。
+
 <template>
-  <lay-button @click="mvalue=['1','5','7']">点击切换(当前值:{{mvalue.join()}})</lay-button>
+  <lay-select v-model="value6" multiple>
-  <br/>
-  <br/>
-  <lay-select v-model="mvalue" @change="change" 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 value6 = ref(['1','2']);
-    const change = function(val){
+
-      console.log(val, mvalue.value)
-    }
     return {
-      mvalue,
+      value6
-      change
     }
   }
 }
 </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`                  | -- | -- |

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 = {

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('');

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>

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

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> 

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"

package/layer/src/component/index.vue

@@ -337,7 +337,7 @@ watch(
       props.success();
     }
   },
-  { immediate: true }
+  { immediate: true, flush: "post" }
 );
 
 watch(