✨(component): update

package/component/src/component/select/index.less

@@ -5,6 +5,7 @@
 
 .layui-select {
   width: 220px;
+  cursor: pointer;
   .layui-tag-input{
     width: 220px;
     &-clear{
@@ -13,6 +14,10 @@
   }
 }
 
+.layui-unselect * {
+  cursor: pointer;
+}
+
 .layui-select-content {
   max-height: 300px;
   padding: 5px 0px;

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

@@ -1,231 +1,231 @@
 <script lang="ts">
-  export default {
+export default {
-    name: "LaySelect",
+  name: "LaySelect",
-  };
+};
-  </script>
+</script>
-  
-  <script setup lang="ts">
-  import "./index.less";
-  import {
-    provide,
-    computed,
-    ref,
-    Ref,
-    useSlots,
-    onMounted,
-    VNode,
-    Component,
-    watch,
-    nextTick,
-    onUnmounted
-  } from "vue";
-  import { LayIcon } from "@layui/icons-vue";
-  import LayInput from "../input/index.vue";
-  import LayTagInput from "../tagInput/index.vue";
-  import LayDropdown from "../dropdown/index.vue";
-  import LaySelectOption, {
-    LaySelectOptionProps,
-  } from "../selectOption/index.vue";
-  
-  export interface LaySelectProps {
-    name?: string;
-    disabled?: boolean;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    showEmpty?: boolean;
-    emptyMessage?: string;
-    modelValue?: any;
-    multiple?: boolean;
-    items?: LaySelectOptionProps[];
-    size?: "lg" | "md" | "sm" | "xs";
-    collapseTagsTooltip?: boolean;
-    minCollapsedNum?: number;
-    allowClear?: boolean;
-    showSearch?: boolean;
-  }
-  
-  export interface SelectEmits {
-    (e: "update:modelValue", value: string): void;
-    (e: "change", value: string): void;
-    (e: "search", value: string): void;
-  }
-  
-  const props = withDefaults(defineProps<LaySelectProps>(), {
-    modelValue: null,
-    placeholder: "请选择",
-    showEmpty: true,
-    emptyMessage: "请选择",
-    searchPlaceholder: "请搜索",
-    collapseTagsTooltip: true,
-    minCollapsedNum: 3,
-    disabled: false,
-    multiple: false,
-    allowClear: false,
-    showSearch: false,
-    size: "md",
-  });
-  
-  const slots = useSlots();
-  const searchValue = ref("");
-  const singleValue = ref("");
-  const multipleValue = ref([]);
-  const emits = defineEmits<SelectEmits>();
-  const openState: Ref<boolean> = ref(false);
-  const options = ref<any>([]);
-  var timer: any;
 
-  const getOption = (nodes: VNode[]) => {
+<script setup lang="ts">
-    nodes?.map((item: VNode) => {
+import "./index.less";
-      let component = item.type as Component;
+import {
-      if (component.name === LaySelectOption.name) {
+  provide,
-        options.value.push(item.props);
+  computed,
-      } else {
+  ref,
-        getOption(item.children as VNode[]);
+  Ref,
-      }
+  useSlots,
-    });
+  onMounted,
-  };
+  VNode,
+  Component,
+  watch,
+  nextTick,
+  onUnmounted,
+} from "vue";
+import { LayIcon } from "@layui/icons-vue";
+import LayInput from "../input/index.vue";
+import LayTagInput from "../tagInput/index.vue";
+import LayDropdown from "../dropdown/index.vue";
+import LaySelectOption, {
+  LaySelectOptionProps,
+} from "../selectOption/index.vue";
 
-  const intOption = () => {
+export interface LaySelectProps {
-    if (slots.default) {
+  name?: string;
-        getOption(slots.default());
+  disabled?: boolean;
-    }
+  placeholder?: string;
-    Object.assign(options.value, props.items);
+  searchPlaceholder?: string;
-  }
+  showEmpty?: boolean;
+  emptyMessage?: string;
+  modelValue?: any;
+  multiple?: boolean;
+  items?: LaySelectOptionProps[];
+  size?: "lg" | "md" | "sm" | "xs";
+  collapseTagsTooltip?: boolean;
+  minCollapsedNum?: number;
+  allowClear?: boolean;
+  showSearch?: boolean;
+}
 
-  onMounted(() => {
+export interface SelectEmits {
-  
+  (e: "update:modelValue", value: string): void;
-    intOption();
+  (e: "change", value: string): void;
-    timer = setInterval(intOption, 500);
+  (e: "search", value: string): void;
-  
+}
-    watch(
+
-      [selectedValue, options],
+const props = withDefaults(defineProps<LaySelectProps>(), {
-      () => {
+  modelValue: null,
-        if (multiple.value) {
+  placeholder: "请选择",
-          multipleValue.value = selectedValue.value.map((value: any) => {
+  showEmpty: true,
-            return options.value.find((item: any) => {
+  emptyMessage: "请选择",
-              item.disabled == "" || item.disabled == true
+  searchPlaceholder: "请搜索",
-                ? (item.closable = false)
+  collapseTagsTooltip: true,
-                : (item.closable = true);
+  minCollapsedNum: 3,
-              return item.value === value;
+  disabled: false,
-            });
+  multiple: false,
-          });
+  allowClear: false,
-        } else {
+  showSearch: false,
-          searchValue.value = "";
+  size: "md",
-          singleValue.value = options.value.find((item: any) => {
+});
-            return item.value === selectedValue.value;
+
-          })?.label;
+const slots = useSlots();
-        }
+const searchValue = ref("");
-      },
+const singleValue = ref("");
-      { immediate: true, deep: true }
+const multipleValue = ref([]);
-    );
+const emits = defineEmits<SelectEmits>();
-  });
+const openState: Ref<boolean> = ref(false);
-  
+const options = ref<any>([]);
-  onUnmounted(() => {
+var timer: any;
-    clearInterval(timer);
+
-  })
+const getOption = (nodes: VNode[]) => {
-  
+  nodes?.map((item: VNode) => {
-  const selectedValue = computed({
+    let component = item.type as Component;
-    get() {
+    if (component.name === LaySelectOption.name) {
-      return props.modelValue;
+      options.value.push(item.props);
-    },
-    set(value) {
-      emits("update:modelValue", value);
-      emits("change", value);
-    },
-  });
-  
-  const multiple = computed(() => {
-    return props.multiple;
-  });
-  
-  const handleSearch = (value: string) => {
-    emits("search", value);
-    searchValue.value = value;
-  };
-  
-  const handleClear = () => {
-    if (multiple.value) {
-      selectedValue.value = [];
     } else {
-      selectedValue.value = "";
+      getOption(item.children as VNode[]);
     }
-  };
+  });
-  
+};
-  provide("openState", openState);
+
-  provide("selectedValue", selectedValue);
+const intOption = () => {
-  provide("searchValue", searchValue);
+  if (slots.default) {
-  provide("multiple", multiple);
+    getOption(slots.default());
-  </script>
+  }
-  
+  Object.assign(options.value, props.items);
-  <template>
+};
-    <div class="layui-select layui-unselect">
+
-      <lay-dropdown
+onMounted(() => {
-        :disabled="disabled"
+  intOption();
-        :update-at-scroll="true"
+  timer = setInterval(intOption, 500);
-        @show="openState = true"
+
-        @hide="openState = false"
+  watch(
+    [selectedValue, options],
+    () => {
+      if (multiple.value) {
+        multipleValue.value = selectedValue.value.map((value: any) => {
+          return options.value.find((item: any) => {
+            item.disabled == "" || item.disabled == true
+              ? (item.closable = false)
+              : (item.closable = true);
+            return item.value === value;
+          });
+        });
+      } else {
+        searchValue.value = "";
+        singleValue.value = options.value.find((item: any) => {
+          return item.value === selectedValue.value;
+        })?.label;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+});
+
+onUnmounted(() => {
+  clearInterval(timer);
+});
+
+const selectedValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+    emits("change", value);
+  },
+});
+
+const multiple = computed(() => {
+  return props.multiple;
+});
+
+const handleSearch = (value: string) => {
+  emits("search", value);
+  searchValue.value = value;
+};
+
+const handleClear = () => {
+  if (multiple.value) {
+    selectedValue.value = [];
+  } else {
+    selectedValue.value = "";
+  }
+};
+
+provide("openState", openState);
+provide("selectedValue", selectedValue);
+provide("searchValue", searchValue);
+provide("multiple", multiple);
+</script>
+
+<template>
+  <div class="layui-select">
+    <lay-dropdown
+      :disabled="disabled"
+      :update-at-scroll="true"
+      @show="openState = true"
+      @hide="openState = false"
+    >
+      <lay-tag-input
+        v-if="multiple"
+        v-model="multipleValue"
+        :allow-clear="allowClear"
+        :placeholder="placeholder"
+        :collapseTagsTooltip="collapseTagsTooltip"
+        :minCollapsedNum="minCollapsedNum"
+        :disabledInput="true"
+        :size="size"
+        :class="{'layui-unselect': true}"
+        @clear="handleClear"
       >
-        <lay-tag-input
+        <template #suffix>
-          v-if="multiple"
+          <lay-icon
-          v-model="multipleValue"
+            type="layui-icon-triangle-d"
-          :allow-clear="allowClear"
+            :class="{ triangle: openState }"
-          :placeholder="placeholder"
+          ></lay-icon>
-          :collapseTagsTooltip="collapseTagsTooltip"
-          :minCollapsedNum="minCollapsedNum"
-          :disabledInput="true"
-          :size="size"
-          @clear="handleClear"
-        >
-          <template #suffix>
-            <lay-icon
-              type="layui-icon-triangle-d"
-              :class="{ triangle: openState }"
-            ></lay-icon>
-          </template>
-        </lay-tag-input>
-        <lay-input
-          v-else
-          v-model="singleValue"
-          :placeholder="placeholder"
-          :allow-clear="allowClear"
-          :readonly="!showSearch"
-          :size="size"
-          @Input="handleSearch"
-          @clear="handleClear"
-        >
-          <template #suffix>
-            <lay-icon
-              type="layui-icon-triangle-d"
-              :class="{ triangle: openState }"
-            ></lay-icon>
-          </template>
-        </lay-input>
-        <template #content>
-          <dl class="layui-select-content">
-            <div class="layui-select-search" v-if="multiple && showSearch">
-              <lay-input
-                v-model="searchValue"
-                :placeholder="searchPlaceholder"
-                prefix-icon="layui-icon-search"
-                size="sm"
-              ></lay-input>
-            </div>
-            <lay-select-option
-              v-if="showEmpty && !multiple"
-              :label="emptyMessage"
-              value=""
-            ></lay-select-option>
-            <template v-if="items">
-              <lay-select-option
-                v-for="(item, index) in items"
-                v-bind="item"
-                :key="index"
-              ></lay-select-option>
-            </template>
-            <slot></slot>
-          </dl>
         </template>
-      </lay-dropdown>
+      </lay-tag-input>
-    </div>
+      <lay-input
-  </template>
+        v-else
-  
+        v-model="singleValue"
+        :placeholder="placeholder"
+        :allow-clear="allowClear"
+        :readonly="!showSearch"
+        :class="{'layui-unselect': !showSearch}"
+        :size="size"
+        @Input="handleSearch"
+        @clear="handleClear"
+      >
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
+        </template>
+      </lay-input>
+      <template #content>
+        <dl class="layui-select-content">
+          <div class="layui-select-search" v-if="multiple && showSearch">
+            <lay-input
+              v-model="searchValue"
+              :placeholder="searchPlaceholder"
+              prefix-icon="layui-icon-search"
+              size="sm"
+            ></lay-input>
+          </div>
+          <lay-select-option
+            v-if="showEmpty && !multiple"
+            :label="emptyMessage"
+            value=""
+          ></lay-select-option>
+          <template v-if="items">
+            <lay-select-option
+              v-for="(item, index) in items"
+              v-bind="item"
+              :key="index"
+            ></lay-select-option>
+          </template>
+          <slot></slot>
+        </dl>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>

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

@@ -13,7 +13,7 @@
 ::: 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>

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

@@ -14,17 +14,19 @@
       <ul> 
       <a name="1-5-1"></a> 
       <li> 
-        <h3>1.5.1 <span class="layui-badge-rim">2022-10-01</span></h3> 
+        <h3>1.5.1 <span class="layui-badge-rim">2022-09-30</span></h3> 
         <ul>
-          <li>[新增] avatar 组件 default 查询, 用于显示文本头像。</li>
+          <li>[新增] avatar 组件 default 插槽, 支持文本头像, 用于复杂场景。</li>
           <li>[新增] avatar 组件 icon 属性, 用于展示 iconfont 头像, 默认值为 `layui-icon-username`。</li>
+          <li>[修复] select 组件 multiple 为 true 且 showSearch 为 true 时光标为输入, 否则为小手指。</li>
+          <li>[修复] select 组件 slots 延时渲染, 选中项 label 不更新的问题。</li>
         </ul> 
       </li>
     </ul>
     <ul> 
       <a name="1-5-0"></a> 
       <li> 
-        <h3>1.5.0 <span class="layui-badge-rim">2022-10-01</span></h3> 
+        <h3>1.5.0 <span class="layui-badge-rim">2022-09-29</span></h3> 
         <ul>
           <li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
           <li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>