From f393343f031742dd22350f3846071bcad17367a1 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: Wed, 7 Dec 2022 00:20:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(icon-picker):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=20allow-clear=20=E5=B1=9E=E6=80=A7,=20=E5=BC=80=E5=90=AF?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/iconPicker/index.less       |  9 ++++++
 .../src/component/iconPicker/index.vue        | 15 ++++++++++
 .../component/src/component/tabItem/index.vue |  2 +-
 .../document/zh-CN/components/iconPicker.md   | 29 ++++++++++++++++++-
 .../src/document/zh-CN/guide/changelog.md     |  1 +
 5 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/package/component/src/component/iconPicker/index.less b/package/component/src/component/iconPicker/index.less
index 4d58b48e..176e4ddc 100644
--- a/package/component/src/component/iconPicker/index.less
+++ b/package/component/src/component/iconPicker/index.less
@@ -152,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;
 }
diff --git a/package/component/src/component/iconPicker/index.vue b/package/component/src/component/iconPicker/index.vue
index 9ae930c7..a3b39392 100644
--- a/package/component/src/component/iconPicker/index.vue
+++ b/package/component/src/component/iconPicker/index.vue
@@ -17,6 +17,7 @@ export interface IconPickerProps {
   modelValue?: string;
   disabled?: boolean;
   showSearch?: boolean;
+  allowClear?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
 }
@@ -38,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);
@@ -155,6 +164,12 @@ 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"
diff --git a/package/component/src/component/tabItem/index.vue b/package/component/src/component/tabItem/index.vue
index 3db47292..c946f4d0 100644
--- a/package/component/src/component/tabItem/index.vue
+++ b/package/component/src/component/tabItem/index.vue
@@ -11,7 +11,7 @@ import {
   useSlots,
   getCurrentInstance,
   reactive,
-  onBeforeUnmount,
+  onBeforeUnmount
 } from "vue";
 import { TabInjectKey, TabsContext } from "../tab/interface";
 
diff --git a/package/document-component/src/document/zh-CN/components/iconPicker.md b/package/document-component/src/document/zh-CN/components/iconPicker.md
index b3d57ec4..0566a214 100644
--- a/package/document-component/src/document/zh-CN/components/iconPicker.md
+++ b/package/document-component/src/document/zh-CN/components/iconPicker.md
@@ -59,6 +59,32 @@ export default {
 
 :::
 
+::: title 选择清空
+:::
+
+::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+
+<template>
+  <lay-icon-picker v-model="icon" :allow-clear="true"></lay-icon-picker>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const icon = ref("layui-icon-home")
+
+    return {
+      icon
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 开启分页
 :::
 
@@ -116,12 +142,13 @@ export default {
 
 ::: table
 
-|            |          |     |   |   |
+| 属性           |  说明        |  类型   | 默认值  | 可选值  |
 | ---------- | -------- | --- |--- |--- |
 | v-model    | 默认值   | --  |--  |--  |
 | page       | 开启分页 | --  |--  |--  |
 | showSearch | 启用搜索 | --  |--  |--  |
 | disabled | 禁用 | `boolean`  |--  |--  |
+| allow-clear | 允许清空 | `boolean`  |--  |--  |
 | contentStyle             | 内容自定义样式     | `StyleValue` | -- | -- |
 | contentClass             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
 
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 e9d79fba..bf28f91e 100644
--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@@ -16,6 +16,7 @@
       <li> 
         <h3>1.7.11 <span class="layui-badge-rim">2022-12-05</span></h3> 
         <ul>
+          <li>[新增] icon-picker 组件 allow-clear 属性, 开启清空操作。</li>
           <li>[修复] button 组件 夜间模式 下, 普通按钮边框高亮与背景色不一致的问题。</li>
           <li>[优化] checkbox 组件 默认主题 下, 勾选框多余的左边框。</li>
           <li>[优化] icon-picker 组件 下拉 图标, 在打开关闭时赋予不同的状态。</li>