From 4db23c9f8a9a478b0a4568550f7d4f61d82acf2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 24 Sep 2022 13:22:05 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/input/index.vue   | 16 +++++-----
 .../component/src/component/select/index.vue  | 31 ++++++++++++++-----
 .../src/component/selectOption/index.vue      | 16 +++++++---
 .../src/component/tagInput/index.less         | 15 +++++++--
 .../src/component/tagInput/index.vue          | 31 ++++++++++---------
 .../src/document/zh-CN/components/tagInput.md | 27 ++++++++++++++++
 .../src/document/zh-CN/guide/changelog.md     | 30 +++++++++++-------
 7 files changed, 117 insertions(+), 49 deletions(-)

diff --git a/package/component/src/component/input/index.vue b/package/component/src/component/input/index.vue
index 553ba6de..f0a99a86 100644
--- a/package/component/src/component/input/index.vue
+++ b/package/component/src/component/input/index.vue
@@ -166,14 +166,6 @@ const showPassword = () => {
         @compositionstart="onCompositionstart"
         @compositionend="onCompositionend"
       />
-      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
-        <slot name="suffix" v-if="slots.suffix"></slot>
-        <lay-icon
-          v-else
-          :type="props.suffixIcon"
-          class="layui-input-suffix-icon"
-        ></lay-icon>
-      </span>
       <span
         class="layui-input-password"
         @click="showPassword"
@@ -185,6 +177,14 @@ const showPassword = () => {
       <span class="layui-input-clear" v-if="allowClear && hasContent">
         <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
       </span>
+      <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
+        <slot name="suffix" v-if="slots.suffix"></slot>
+        <lay-icon
+          v-else
+          :type="props.suffixIcon"
+          class="layui-input-suffix-icon"
+        ></lay-icon>
+      </span>
     </div>
     <div class="layui-input-append" v-if="slots.append">
       <slot name="append"></slot>
diff --git a/package/component/src/component/select/index.vue b/package/component/src/component/select/index.vue
index e72bacbb..d8251c39 100644
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@@ -10,9 +10,7 @@ import { provide, computed, WritableComputedRef, ref } from "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";
+import LaySelectOption, { LaySelectOptionProps } from "../selectOption/index.vue";
 
 export interface LaySelectProps {
   name?: string;
@@ -67,16 +65,35 @@ provide("multiple", multiple);
 <template>
   <div class="layui-select">
     <lay-dropdown update-at-scroll>
-      <lay-tag-input v-if="multiple" v-model="selectedValue" :disabledInput="true"></lay-tag-input>
+      <lay-tag-input
+        v-if="multiple"
+        v-model="selectedValue"
+        :disabledInput="true"
+        :allow-clear="true"
+      >
+        <template #suffix>
+          <lay-icon type="layui-icon-triangle-d"></lay-icon>
+        </template>
+      </lay-tag-input>
       <lay-input
         v-else
-        :placeholder="placeholder"
         v-model="selectedValue"
-      ></lay-input>
+        :placeholder="placeholder"
+        :allow-clear="true"
+      >
+        <template #suffix>
+          <lay-icon type="layui-icon-triangle-d"></lay-icon>
+        </template>
+      </lay-input>
       <template #content>
         <dl class="layui-select-options">
           <div class="layui-select-search">
-            <lay-input v-model="searchValue" size="sm" placeholder="请选择" prefix-icon="layui-icon-search"></lay-input>
+            <lay-input
+              v-model="searchValue"
+              size="sm"
+              placeholder="请选择"
+              prefix-icon="layui-icon-search"
+            ></lay-input>
           </div>
           <template v-if="items">
             <lay-select-option
diff --git a/package/component/src/component/selectOption/index.vue b/package/component/src/component/selectOption/index.vue
index d7140a22..cd353562 100644
--- a/package/component/src/component/selectOption/index.vue
+++ b/package/component/src/component/selectOption/index.vue
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 });
 
 const selectedValue: WritableComputedRef<any> = inject("selectedValue") as WritableComputedRef<any>;
-const searchValue: Ref<string> = inject('searchValue') as Ref<string>;
+const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
 
 const handleSelect = () => {
@@ -35,14 +35,16 @@ const selected = computed(() => {
   if (multiple.value) {
     return selectedValue.value.indexOf(props.value) != -1;
   } else {
-    // close dropdown
     return selectedValue.value === props.value;
   }
 });
 
 const display = computed(() => {
-  return props.keyword.indexOf(searchValue.value) > -1 || props.label.indexOf(searchValue.value) > -1;
-})
+  return (
+    props.keyword.indexOf(searchValue.value) > -1 ||
+    props.label.indexOf(searchValue.value) > -1
+  );
+});
 </script>
 
 <template>
@@ -52,7 +54,11 @@ const display = computed(() => {
     @click="handleSelect"
   >
     <template v-if="multiple">
-      <lay-checkbox v-model="selectedValue" :value="value" skin="primary"></lay-checkbox>
+      <lay-checkbox
+        v-model="selectedValue"
+        :value="value"
+        skin="primary"
+      ></lay-checkbox>
     </template>
     <slot>{{ label }}</slot>
   </dd>
diff --git a/package/component/src/component/tagInput/index.less b/package/component/src/component/tagInput/index.less
index c7996839..0c4431ca 100644
--- a/package/component/src/component/tagInput/index.less
+++ b/package/component/src/component/tagInput/index.less
@@ -28,7 +28,6 @@
   border-style: solid;
   border-color: var(--input-border-color);
   border-radius: var(--input-border-radius);
-  padding: 0 5px;
   cursor: text;
 
   &-inner {
@@ -48,8 +47,11 @@
   }
 
   &-clear {
-    display: none;
+    flex: none;
+    display: flex;
     align-items: center;
+    padding-right: 10px;
+    color: rgba(0, 0, 0, 0.45);
     cursor: pointer;
   }
 
@@ -112,7 +114,7 @@
       }
 
       .layui-tag-input-inner {
-        padding: @@inner-padding 0;
+        padding: @@inner-padding 5px;
       }
 
       .layui-tag {
@@ -129,6 +131,13 @@
   .set-size(xs);
 }
 
+.layui-tag-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 15px;
+}
+
 .layui-tag-input:hover,
 .layui-tag-input:focus-within {
   border-color: #d2d2d2 !important;
diff --git a/package/component/src/component/tagInput/index.vue b/package/component/src/component/tagInput/index.vue
index 85926e3e..63f7cdb0 100644
--- a/package/component/src/component/tagInput/index.vue
+++ b/package/component/src/component/tagInput/index.vue
@@ -46,7 +46,7 @@ const props = withDefaults(defineProps<LayInputTagProps>(), {
   disabledInput: false,
   placeholder: "",
   readonly: false,
-  allowClear: true,
+  allowClear: false,
   minCollapsedNum: 3,
   size: "md",
 });
@@ -245,23 +245,26 @@ defineExpose({
       </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"
-        @compositionstart="handleComposition"
-        @compositionupdate="handleComposition"
-        @compositionend="handleComposition"
-      />
+          ref="inputRefEl"
+          class="layui-tag-input-inner-input"
+          :style="inputStyle"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          @keydown.enter="handleEnter"
+          @keyup="handleBackspaceKeyUp"
+          @input="handleInput"
+          @compositionstart="handleComposition"
+          @compositionupdate="handleComposition"
+          @compositionend="handleComposition"
+        />
       </template>
     </span>
     <span v-if="allowClear && tagData?.length" class="layui-tag-input-clear">
       <lay-icon type="layui-icon-close-fill" @click.stop="handleClearClick" />
     </span>
+    <span class="layui-tag-input-suffix"  v-if="$slots.suffix">
+      <slot name="suffix"></slot> 
+    </span> 
   </div>
 </template>
diff --git a/package/document-component/src/document/zh-CN/components/tagInput.md b/package/document-component/src/document/zh-CN/components/tagInput.md
index 366f3583..bcd7c51a 100644
--- a/package/document-component/src/document/zh-CN/components/tagInput.md
+++ b/package/document-component/src/document/zh-CN/components/tagInput.md
@@ -86,4 +86,31 @@ export default {
 }
 </script>
 
+:::
+
+::: title 禁用状态
+:::
+
+::: demo 使用 `lay-tag-input` 标签, 创建标签输入框。  
+
+<template>
+  <lay-tag-input v-model="data5" v-model:inputValue="inputValue5" :allow-clear="true"></lay-tag-input>
+</template>
+
+<script>
+import { ref,watch } from 'vue'
+
+export default {
+  setup() {
+    const data5 = ref(['Vue', 'React']);
+    const inputValue5 = ref("");
+
+    return {
+      data5,
+      inputValue5
+    }
+  }
+}
+</script>
+
 :::
\ No newline at end of file
diff --git a/package/document-component/src/document/zh-CN/guide/changelog.md b/package/document-component/src/document/zh-CN/guide/changelog.md
index 5b7c548a..07c39391 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -10,23 +10,29 @@
 ::: demo
 <template>
 <lay-timeline>
-  <lay-timeline-item title="1.4.x">
+  <lay-timeline-item title="1.5.x">
     <ul> 
-      <a name="1-4-14"></a> 
+      <a name="1-5-0"></a> 
       <li> 
-        <h3>1.4.15 <span class="layui-badge-rim">2022-09-27</span></h3> 
-        <ul>     
-          <li>[新增] tag-input 标签输入框组件。</li>
+        <h3>1.5.0 <span class="layui-badge-rim">2022-05-27</span></h3> 
+        <ul>
+          <li>[新增] tag-input 标签输入框组件, 用于录入事物的属性与纬度。</li>
           <li>[新增] table 组件 header 插槽, 用于在工具栏与表格之间插入元素。</li>
-          <li>[新增] tabitem 组件 icon 属性, 用于自定义 tab-item 图标。</li>
-          <li>[修复] layout 组件只引入了 footer 时, layui-layout-vertical样式不生效。</li>
-          <li>[修复] cascader 外部清空modelValue, 内部displayValue不清空问题。</li>
-          <li>[修复] tolltip 组件 content 自动定位。</li>
-          <li>[修复] breadcrumb-item 组件无法正确传递 attrs 的问题。</li>
-          <li>[优化] tag 组件 border background height 等默认样式。</li>
-        </ul>
+          <li>[新增] tabitem 组件 icon 属性, 提供 title 属性前置 icon 设置。</li>
+          <li>[修复] tolltip 组件 content 变化时, 位置无法自动计算调整的问题。</li>
+          <li>[修复] breadcrumb-item 组件无法正确传递 attrs, 导致 @click 等自定义事件失效。</li>
+          <li>[修复] layout 组件仅引入了 footer 作为内容元素时, layui-layout-vertical 样式不生效, 导致布局错误。</li>
+          <li>[修复] select 组件 multiple 属性为 true 时, 删除选项时清空筛选条件的问题。</li>
+          <li>[修复] cascader 外部清空 modelValue, 选中项仍不清楚的问题。</li>
+          <li>[修复] select 组件位于 layer 底部时, 点击时出现滚动条。</li>
+          <li>[修复] select 组件与 table 组件组合使用时, 下拉内容被遮盖。</li>
+          <li>[优化] tag 组件 border background height 等, 使其更贴合 layui 的设计规范。</li>
+          <li>[优化] input 组件 suffix 插槽与 allow-clear 启用时的显示顺序, clear > suffix。</li>
+        </ul> 
       </li>
     </ul>
+  </lay-timeline-item>
+  <lay-timeline-item title="1.4.x">
     <ul> 
       <a name="1-4-14"></a> 
       <li>