✨(component): 同步 next 改动

package/component/src/component/cascader/index.vue

@@ -8,19 +8,21 @@
       :trigger="trigger"
       :autoFitMinWidth="false"
       :updateAtScroll="true"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle" 
       :disabled="dropDownDisabled"
       @show="openState = true"
       @hide="openState = false"
     >
       <lay-input
+        v-if="!slots.default"
         v-model="displayValue"
-        readonly
         suffix-icon="layui-icon-triangle-d"
         :placeholder="placeholder"
-        v-if="!slots.default"
         :allow-clear="allowClear"
-        @clear="onClear"
+        :readonly="true"
         :size="size"
+        @clear="onClear"
       ></lay-input>
       <slot v-else></slot>
 
@@ -73,7 +75,7 @@ import "./index.less";
 import LayInput from "../input/index.vue";
 import LayScroll from "../scroll/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import { ref, onMounted, watch, useSlots } from "vue";
+import { ref, onMounted, watch, useSlots, StyleValue } from "vue";
 import { CascaderSize } from "./interface";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
@@ -88,6 +90,8 @@ export interface CascaderProps {
   allowClear?: boolean;
   size?: CascaderSize;
   trigger?: DropdownTrigger | DropdownTrigger[];
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
 }
 
 const props = withDefaults(defineProps<CascaderProps>(), {
@@ -107,6 +111,7 @@ const props = withDefaults(defineProps<CascaderProps>(), {
     };
   },
 });
+
 const emit = defineEmits(["update:modelValue", "change", "clear"]);
 
 onMounted(() => {

package/component/src/component/colorPicker/index.vue

@@ -8,13 +8,16 @@ export default {
 import "./index.less";
 import LayDropdown from "../dropdown/index.vue";
 import EyeDropper from "./EyeDropper.vue";
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch, onMounted, StyleValue } from "vue";
 import { useEyeDropper } from "@vueuse/core";
 
 export interface ColorPicker {
   modelValue?: any;
   preset?: any;
+  disabled?: boolean;
   eyeDropper?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
 }
 
 const emit = defineEmits(["update:modelValue"]);
@@ -22,6 +25,7 @@ const emit = defineEmits(["update:modelValue"]);
 const props = withDefaults(defineProps<ColorPicker>(), {
   modelValue: { r: 255, g: 255, b: 255, a: 1 },
   preset: ["#009688", "#1e9fff", "#ffb800", "#ff5722", "#5fb878"],
+  disabled: false
 });
 
 const saturationValue = ref<null | HTMLElement>(null);
@@ -401,7 +405,11 @@ function hex2rgba(s: any) {
 </script>
 
 <template>
-  <lay-dropdown updateAtScroll>
+  <lay-dropdown       
+      :disabled="disabled"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle" 
+      updateAtScroll>
     <div class="layui-unselect layui-colorpicker">
       <span>
         <span

package/component/src/component/datePicker/components/DateRange.vue

@@ -86,7 +86,7 @@
             </lay-dropdown>
             <lay-dropdown ref="dropdownMonthPanelRefRight">
               <span class="laydate-range-time"
-                >{{ startTime.month + 2 }}月</span
+                >{{ startTime.month + 2 > 12 ? startTime.month - 10 : startTime.month + 2 }}月</span
               >
               <template #content>
                 <MonthPanel

package/component/src/component/datePicker/index.vue

@@ -7,6 +7,8 @@
       ref="dropdownRef"
       :disabled="disabled"
       :autoFitMinWidth="false"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle" 
       updateAtScroll
     >
       <lay-input
@@ -109,7 +111,7 @@ import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import { getMonth, getYear, getDay } from "./day";
-import { ref, watch, defineProps, defineEmits, reactive, provide } from "vue";
+import { ref, watch, defineProps, defineEmits, reactive, provide, StyleValue } from "vue";
 import DatePanel from "./components/DatePanel.vue";
 import TimePanel from "./components/TimePanel.vue";
 import YearPanel from "./components/YearPanel.vue";
@@ -134,6 +136,8 @@ export interface DatePickerProps {
   prefixIcon?: string;
   suffixIcon?: string;
   timestamp?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
 }
 
 const props = withDefaults(defineProps<DatePickerProps>(), {

package/component/src/component/iconPicker/index.vue

@@ -6,7 +6,7 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { computed, Ref, ref, watch } from "vue";
+import { computed, Ref, ref, StyleValue } from "vue";
 import { LayIconList as icons } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
 import LayInput from "../input/index.vue";
@@ -15,11 +15,15 @@ import LayScroll from "../scroll/index.vue";
 export interface IconPickerProps {
   page?: boolean;
   modelValue?: string;
+  disabled?: boolean;
   showSearch?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
 }
 
 const props = withDefaults(defineProps<IconPickerProps>(), {
   modelValue: "layui-icon-face-smile",
+  disabled: false,
   page: false,
 });
 
@@ -134,7 +138,12 @@ const searchList = (str: string, container: any) => {
 </script>
 
 <template>
-  <lay-dropdown ref="dropdownRef" updateAtScroll>
+  <lay-dropdown 
+      ref="dropdownRef"       
+      :disabled="disabled"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle" 
+      updateAtScroll>
     <div
       class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
     >

package/component/src/component/select/index.vue

@@ -17,6 +17,7 @@ import {
   Component,
   watch,
   onUnmounted,
+StyleValue,
 } from "vue";
 import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
@@ -40,6 +41,8 @@ export interface SelectProps {
   minCollapsedNum?: number;
   allowClear?: boolean;
   showSearch?: boolean;
+  contentClass?: string | Array<string | object> | object;
+  contentStyle?: StyleValue;
 }
 
 export interface SelectEmits {
@@ -179,6 +182,8 @@ provide("multiple", multiple);
     <lay-dropdown
       ref="selectRef"
       :disabled="disabled"
+      :contentClass="contentClass"
+      :contentStyle="contentStyle"
       :update-at-scroll="true"
       @show="openState = true"
       @hide="openState = false"

package/component/src/component/space/index.vue

@@ -1,4 +1,4 @@
-<script lang="tsx">
+<script lang="ts">
 import "./index.less";
 import {
   computed,
@@ -10,7 +10,8 @@ import {
   StyleValue,
   defineComponent,
   PropType,
-  VNodeNormalizedChildren,
+  h,
+  renderSlot,
 } from "vue";
 
 type SpaceSize = "lg" | "md" | "sm" | "xs" | number | string;
@@ -18,28 +19,23 @@ type SpaceSize = "lg" | "md" | "sm" | "xs" | number | string;
 export default defineComponent({
   name: "LaySpace",
   props: {
-    /* 对齐方式 */
     align: {
       type: String as PropType<"start" | "end" | "center" | "baseline">,
     },
-    /* 间距方向 */
     direction: {
       type: String as PropType<"horizontal" | "vertical">,
       default: "horizontal",
     },
-    /* 子元素是否填充父容器 */
     fill: {
       type: Boolean,
       default: false,
     },
-    /* 间距大小 */
     size: {
       type: [Number, String, Array] as PropType<
         SpaceSize | [SpaceSize, SpaceSize]
       >,
       default: "sm",
     },
-    /* 是否自动折行 */
     wrap: {
       type: Boolean,
       default: false,
@@ -51,10 +47,52 @@ export default defineComponent({
       () => props.align ?? (props.direction === "horizontal" ? "center" : "")
     );
 
+    const spaceClass = computed(() => [
+      "layui-space",
+      {
+        [`layui-space-align-${computAlign.value}`]: computAlign.value,
+        [`layui-space-${props.direction}`]: props.direction,
+        [`layui-space-wrap`]: props.wrap,
+        [`layui-space-fill`]: props.fill,
+      },
+    ]);
+
+    const spaceStyle = computed<StyleValue>(() => {
+      const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
+      let gap = "";
+
+      if (Array.isArray(props.size)) {
+        gap = props.size
+          .map((size) => {
+            if (typeof size === "number") {
+              return `${size}px`;
+            }
+            if (typeof size === "string") {
+              return sizeMap[size as keyof Omit<SpaceSize, number>] || size;
+            }
+            return size;
+          })
+          .join(" ");
+      } else if (typeof props.size === "string") {
+        gap =
+          sizeMap[props.size as keyof Omit<SpaceSize, string | number>] ||
+          props.size;
+      } else if (typeof props.size === "number") {
+        gap = `${props.size}px`;
+      }
+
+      return {
+        gap,
+      };
+    });
+
+    const itemStyle = computed<StyleValue>(() => [
+      props.fill ? { flexGrow: 1, minWidth: "100%" } : {},
+    ]);
+
     const extractChildren = () => {
       const result: VNode[] = [];
-      const children =
-        slots.default && (slots?.default() as VNodeNormalizedChildren);
+      const children = renderSlot(slots, "default").children;
       const elementData = Array.isArray(children) ? [...children] : [];
 
       while (elementData.length) {
@@ -80,67 +118,26 @@ export default defineComponent({
       return result;
     };
 
-    const spaceClass = computed(() => [
-      "layui-space",
-      {
-        [`layui-space-align-${computAlign.value}`]: computAlign.value,
-        [`layui-space-${props.direction}`]: props.direction,
-        [`layui-space-wrap`]: props.wrap,
-        [`layui-space-fill`]: props.fill,
-      },
-    ]);
-
-    const spaceStyle = computed<StyleValue>(() => {
-      const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
-      let gap = "";
-
-      if (Array.isArray(props.size)) {
-        gap = props.size
-          .map((size) => {
-            if (typeof size === "number") {
-              return `${size}px`;
-            }
-            if (typeof size === "string") {
-              return (
-                sizeMap[props.size as keyof Omit<SpaceSize, number>] || size
-              );
-            }
-            return size;
-          })
-          .join(" ");
-      } else if (typeof props.size === "string") {
-        gap =
-          sizeMap[props.size as keyof Omit<SpaceSize, string>] || props.size;
-      } else if (typeof props.size === "number") {
-        gap = `${props.size}px`;
-      }
-
-      return {
-        gap,
-      };
-    });
-
-    const itemStyle = computed<StyleValue>(() => [
-      props.fill ? { flexGrow: 1, minWidth: "100%" } : {},
-    ]);
-
     return () => {
       const children = extractChildren();
 
-      return (
-        <div class={spaceClass.value} style={spaceStyle.value}>
-          {children.map((child, index) => {
-            return (
-              <div
-                key={`item-${index}`}
-                class="layui-space-item"
-                style={itemStyle.value}
-              >
-                {child}
-              </div>
-            );
-          })}
-        </div>
+      return h(
+        "div",
+        {
+          class: spaceClass.value,
+          style: spaceStyle.value,
+        },
+        children.map((child, index) => {
+          return h(
+            "div",
+            {
+              key: child.key ?? `item-${index}`,
+              class: "layui-space-item",
+              style: itemStyle.value,
+            },
+            h(child)
+          );
+        })
       );
     };
   },

package/component/src/component/table/index.vue

@@ -32,7 +32,7 @@ export interface TableProps {
   page?: Recordable;
   columns: Recordable[];
   dataSource: Recordable[];
-  defaultToolbar?: boolean;
+  defaultToolbar?: boolean | Recordable[];
   selectedKey?: string;
   selectedKeys?: Recordable[];
   indentSize?: number;

package/component/src/utils/uuidUtil.ts

@@ -0,0 +1,12 @@
+export function nextId() {
+    var s: any = [];
+    var hexDigits = "0123456789abcdef";
+    for (var i = 0; i < 36; i++) {
+      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = "4";
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = "-";
+    var uuid = s.join("");
+    return uuid;
+}

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

@@ -26,6 +26,31 @@ export default {
 
 :::
 
+::: title 禁止选择
+:::
+
+::: demo 使用 `lay-color-picker` 标签, 创建颜色选择器。
+
+<template>
+  <lay-color-picker v-model="color" :disabled="true"></lay-color-picker>
+</template>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  setup() {
+    const color = ref("#009688");
+
+    return {
+      color
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 预设颜色
 :::
 

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

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

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -11,6 +11,27 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.6.x">
+    <ul> 
+      <a name="1-6-10"></a> 
+      <li> 
+        <h3>1.6.10 <span class="layui-badge-rim">2022-10-21</span></h3> 
+        <ul>
+          <li>[新增] select 组件 contentClass 属性, 用于自定义内容区域 class 属性。</li>
+          <li>[新增] select 组件 contentStyle 属性, 用于自定义内容区域 style 属性。</li>
+          <li>[新增] icon-picker 组件 disabled 属性, 禁用图标选择。</li>
+          <li>[新增] icon-picker 组件 contentClass 属性, 用于自定义内容区域 class 属性。</li>
+          <li>[新增] icon-picker 组件 contentStyle 属性, 用于自定义内容区域 style 属性。</li>
+          <li>[新增] color-picker 组件 disabled 属性, 禁用图标选择。</li>
+          <li>[新增] color-picker 组件 contentClass 属性, 用于自定义内容区域 class 属性。</li>
+          <li>[新增] color-picker 组件 contentStyle 属性, 用于自定义内容区域 style 属性。</li>
+          <li>[新增] cascader 组件 contentClass 属性, 用于自定义内容区域 class 属性。</li>
+          <li>[新增] cascader 组件 contentStyle 属性, 用于自定义内容区域 style 属性。</li>
+          <li>[新增] date-picker 组件 contentClass 属性, 用于自定义内容区域 class 属性。</li>
+          <li>[新增] date-picker 组件 contentStyle 属性, 用于自定义内容区域 style 属性。</li>
+          <li>[修复] date-picker 组件 type 属性为 date 值, range 属性为 true 时, 结束月份出现 13 月的问题。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="1-6-9"></a> 
       <li>