From 21d2a5d84fd62b92d1cd49b7dfc8a451ec880603 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Wed, 2 Oct 2024 16:02:27 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat(component/iconPicker):=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=9B=BE=E6=A0=87=E9=9B=86=EF=BC=8C=E5=8F=AF=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../document/zh-CN/components/iconPicker.md   | 196 ++++++++++++-
 .../component/component/iconPicker/index.vue  | 269 +++++++-----------
 .../component/iconPicker/wrapper.vue          | 152 ++++++++++
 packages/icons/src/iconfont/iconfont.ts       |   6 +-
 4 files changed, 451 insertions(+), 172 deletions(-)
 create mode 100644 packages/component/component/iconPicker/wrapper.vue

diff --git a/docs/src/document/zh-CN/components/iconPicker.md b/docs/src/document/zh-CN/components/iconPicker.md
index 08650375..7ffb7320 100644
--- a/docs/src/document/zh-CN/components/iconPicker.md
+++ b/docs/src/document/zh-CN/components/iconPicker.md
@@ -137,23 +137,195 @@ export default {
 
 :::
 
-::: title icon-picker 属性
+::: title 自定义图标集
+:::
+
+::: demo 通过 `icon-sets` 属性传入注册自定义图标集，传入 `show-icon-sets` 可以展示图标集选择器，传入 `current-icon-set` 可以设置默认图标集（只有注册的图标集才可指定默认图标集）
+
+<template>
+  <lay-space direction="vertical">
+    <lay-space>
+      <lay-checkbox v-model="showIconSets">展示图标集</lay-checkbox>
+      <lay-select v-model="currentIconSet">
+        <lay-select-option value="layui">Layui</lay-select-option>
+        <lay-select-option value="bs">Bootstrap Icons</lay-select-option>
+      </lay-select>
+    </lay-space>
+    <lay-icon-picker
+      v-model="icon10"
+      type="layui-icon-face-smile"
+      :icon-sets="iconSet"
+      :show-icon-sets="showIconSets"
+      :current-icon-set="currentIconSet"
+    ></lay-icon-picker>
+  </lay-space>
+</template>
+
+<style>
+@import url("https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
+</style>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  setup() {
+    const showIconSets = ref(true);
+    const icon10 = ref("bi-0-circle");
+    const currentIconSet = ref("bs");
+    const iconSet = ref([
+      "layui",
+      {
+        name: "bs",
+        title: "Bootstrap Icons",
+        prefix: "bi",
+        icons: [
+          {
+            name: "圆圈 0",
+            class: "bi-0-circle",
+          },
+          {
+            name: "圆圈 1",
+            class: "bi-1-circle",
+          },
+          {
+            name: "圆圈 2",
+            class: "bi-2-circle",
+          },
+          {
+            name: "圆圈 3",
+            class: "bi-3-circle",
+          },
+          {
+            name: "圆圈 4",
+            class: "bi-4-circle",
+          },
+          {
+            name: "圆圈 5",
+            class: "bi-5-circle",
+          },
+          {
+            name: "圆圈 6",
+            class: "bi-6-circle",
+          },
+          {
+            name: "圆圈 7",
+            class: "bi-7-circle",
+          },
+          {
+            name: "圆圈 8",
+            class: "bi-8-circle",
+          },
+          {
+            name: "圆圈 9",
+            class: "bi-9-circle",
+          },
+          {
+            name: "苹果",
+            class: "bi-apple",
+          },
+          {
+            name: "安卓",
+            class: "bi-android",
+          },
+          {
+            name: "圆圈 0",
+            class: "bi-0-circle-fill",
+          },
+          {
+            name: "圆圈 1",
+            class: "bi-1-circle-fill",
+          },
+          {
+            name: "圆圈 2",
+            class: "bi-2-circle-fill",
+          },
+          {
+            name: "圆圈 3",
+            class: "bi-3-circle-fill",
+          },
+          {
+            name: "圆圈 4",
+            class: "bi-4-circle-fill",
+          },
+          {
+            name: "圆圈 5",
+            class: "bi-5-circle-fill",
+          },
+          {
+            name: "圆圈 6",
+            class: "bi-6-circle-fill",
+          },
+          {
+            name: "圆圈 7",
+            class: "bi-7-circle-fill",
+          },
+          {
+            name: "圆圈 8",
+            class: "bi-8-circle-fill",
+          },
+          {
+            name: "圆圈 9",
+            class: "bi-9-circle-fill",
+          },
+        ],
+      },
+    ]);
+
+    return {
+      icon10,
+      iconSet,
+      showIconSets,
+      currentIconSet
+    };
+  },
+};
+</script>
+
+:::
+
+::: quote 目前内置了 Layui 图标集
+未指定 `iconSet` 时，默认使用 Layui 图标集
+:::
+
+::: title Property 属性
 :::
 
 ::: table
 
-| 属性           |  说明        |  类型   | 默认值  | 可选值  |
-| ---------- | -------- | --- |--- |--- |
-| v-model    | 默认值   | --  |--  |--  |
-| page       | 开启分页 | --  |--  |--  |
-| size       | 尺寸 | --  |--  |--  |
-| showSearch | 启用搜索 | --  |--  |--  |
-| disabled | 禁用 | `boolean`  |--  |--  |
-| allow-clear | 允许清空 | `boolean`  |--  |--  |
-| contentStyle             | 内容自定义样式     | `StyleValue` | -- | -- |
-| contentClass             | 内容自定义Class    | `string` `Array<string \| object>` `object` | -- | -- |
+| 属性             | 说明             | 类型                                        | 默认值      | 可选值 | 版本     |
+| ---------------- | ---------------- | ------------------------------------------- | ----------- | ------ | -------- |
+| v-model          | 默认值           | --                                          | --          | --     |          |
+| page             | 开启分页         | `boolean`                                   | --          | --     |          |
+| size             | 尺寸             | `"lg"`\|`"md"`\|`"sm"`\|`"xs"`              | --          | --     |          |
+| show-search      | 启用搜索         | `boolean`                                   | --          | --     |          |
+| disabled         | 禁用             | `boolean`                                   | --          | --     |          |
+| allow-clear      | 允许清空         | `boolean`                                   | --          | --     |          |
+| content-style    | 内容自定义样式   | `StyleValue`                                | --          | --     |          |
+| content-class    | 内容自定义 Class | `string` `Array<string \| object>` `object` | --          | --     |          |
+| icon-sets        | 图标集           | `Array<string \| IconSets>`                 | `["layui"]` | --     | `2.19.0` |
+| show-icon-sets   | 显示图标集切换器 | `boolean`                                   | `false`     | --     | `2.19.0` |
+| current-icon-set | 当前图标集       | `string`                                    | `"layui"`   | --     | `2.19.0` |
 
 :::
 
+::: title Types
+:::
+
+```typescript
+export interface IconProp {
+  name: string;
+  class: string;
+  prefix?: string;
+}
+
+export interface IconSets {
+  name: string;
+  title?: string;
+  prefix?: string;
+  icons: IconProp[];
+}
+```
+
 ::: previousNext iconPicker
-:::
\ No newline at end of file
+:::
diff --git a/packages/component/component/iconPicker/index.vue b/packages/component/component/iconPicker/index.vue
index c54c6da6..bbc3aa2d 100644
--- a/packages/component/component/iconPicker/index.vue
+++ b/packages/component/component/iconPicker/index.vue
@@ -1,14 +1,31 @@
 <script setup lang="ts">
 import "./index.less";
-import { computed, Ref, ref, StyleValue } from "vue";
-import { LayIconList as icons, LayIcon } from "@layui/icons-vue";
+import { computed, h, ref, StyleValue } from "vue";
+import { LayIcon, LayIconList } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
-import LayScroll from "../scroll/index.vue";
-import LayInput from "../input/index.vue";
 import useProps from "./index.hooks";
+import LayRender from "../_components/render";
+import LayTab from "../tab/index";
+import LayTabItem from "../tabItem/index";
+import LayIconPickerWrapper from "./wrapper.vue";
+import { watch } from "vue";
+
+export interface IconProp {
+  name: string;
+  class: string;
+  prefix?: string;
+}
+
+export interface IconSets {
+  name: string;
+  title?: string;
+  prefix?: string;
+  icons: IconProp[];
+}
 
 export interface IconPickerProps {
   modelValue?: string;
+  prefix?: string;
   page?: boolean;
   size?: string;
   showSearch?: boolean;
@@ -16,6 +33,21 @@ export interface IconPickerProps {
   allowClear?: boolean;
   contentClass?: string | Array<string | object> | object;
   contentStyle?: StyleValue;
+  /**
+   * 图标集
+   * @version 2.19.0
+   */
+  iconSets?: Array<string | IconSets>;
+  /**
+   * 当前图标集
+   * @version 2.19.0
+   */
+  currentIconSet?: string;
+  /**
+   * 是否显示图标集
+   * @version 2.19.0
+   */
+  showIconSets?: boolean;
 }
 
 defineOptions({
@@ -26,18 +58,47 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
   modelValue: "layui-icon-face-smile",
   disabled: false,
   page: false,
+  iconSets: () => ["layui"],
 });
 
-const { size } = useProps(props);
+const _iconSets = new Map<string, IconSets>();
+props.iconSets?.forEach((element) => {
+  if (typeof element === "string") {
+    // 注册内建图标
+    switch (element) {
+      case "layui":
+        _iconSets.set("layui", {
+          name: "layui",
+          title: "Layui",
+          icons: LayIconList,
+        });
+        break;
+
+      default:
+        break;
+    }
+  } else {
+    // 注册自定义图标
+    _iconSets.set(element.name, element);
+  }
+});
 
+const _currentIconSet = computed(() => props.currentIconSet);
+const { size } = useProps(props);
 const emit = defineEmits(["update:modelValue", "change"]);
 const selectedIcon = computed(() => props.modelValue);
 const dropdownRef = ref<any>(null);
 const openState = ref<boolean>(false);
+const _tabIndex = ref(_currentIconSet.value ?? _iconSets.keys().next().value);
+
+watch(
+  () => _currentIconSet.value,
+  (val) => _iconSets.has(val ?? "") && (_tabIndex.value = val)
+);
 
-const selectIcon = function (icon: string): void {
-  emit("update:modelValue", icon);
-  emit("change", icon);
+const selectIcon = function (icon: string, prefix: string): void {
+  emit("update:modelValue", icon, prefix);
+  emit("change", icon, prefix);
   dropdownRef.value?.hide();
 };
 
@@ -45,107 +106,51 @@ 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(Math.ceil(total.value / 12));
-const currentPage: Ref<number> = ref(1);
-
-if (props.page) {
-  icones.value = icons.slice(0, 12);
-} else {
-  icones.value = icons;
-}
-
-const next = () => {
-  if (currentPage.value === totalPage.value) {
-    return;
-  }
-  currentPage.value = currentPage.value + 1;
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  icones.value = icons.slice(start, end);
-};
-
-const prev = () => {
-  if (currentPage.value === 1) {
-    return;
-  }
-  currentPage.value = currentPage.value - 1;
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  icones.value = icons.slice(start, end);
-};
-
-const clear = () => {
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  if (props.page) {
-    icones.value = icons.slice(start, end);
-    total.value = icons.length;
-    totalPage.value = Math.ceil(icons.length / 12);
-  } else {
-    icones.value = icons;
-  }
+const hasContent = computed(
+  () => props.modelValue != null && props.modelValue != ""
+);
+
+const IconPickerFactory = (icons: IconSets) => {
+  return h(LayIconPickerWrapper, {
+    icones: icons.icons,
+    prefix: icons.prefix,
+    selectedIcon: selectedIcon.value,
+    showSearch: props.showSearch,
+    page: props.page,
+    onSelectIcon: selectIcon,
+  });
 };
 
-const search = (e: any) => {
-  currentPage.value = 1;
-  const start = (currentPage.value - 1) * 12;
-  const end = start + 12;
-  const text = e;
-  if (text) {
-    if (props.page) {
-      icones.value = searchList(text, icons).slice(start, end);
-      total.value = searchList(text, icons).length;
-      totalPage.value = Math.ceil(searchList(text, icons).length / 12);
-    } else {
-      icones.value = searchList(text, icons);
-    }
+const renderWrapper = () => {
+  let wrapper;
+  if (!props.showIconSets) {
+    wrapper = IconPickerFactory(
+      _iconSets.get(props.currentIconSet ?? "layui")!
+    );
   } else {
-    if (props.page) {
-      icones.value = icons.slice(start, end);
-      total.value = icons.length;
-      totalPage.value = Math.ceil(icons.length / 12);
-    } else {
-      icones.value = icons;
-    }
-  }
-};
-
-const searchList = (str: string, container: any) => {
-  var newList = [];
-  var startChar = str.charAt(0);
-  var strLen = str.length;
-  for (var i = 0; i < container.length; i++) {
-    var obj = container[i];
-    var isMatch = false;
-    for (var p in obj) {
-      if (typeof obj[p] == "function") {
-        obj[p]();
-      } else {
-        var curItem = "";
-        if (obj[p] != null) {
-          curItem = obj[p];
-        }
-        for (var j = 0; j < curItem.length; j++) {
-          if (curItem.charAt(j) == startChar) {
-            if (curItem.substring(j).substring(0, strLen) == str) {
-              isMatch = true;
-              break;
-            }
+    wrapper = h(
+      LayTab,
+      {
+        modelValue: _tabIndex.value,
+        "onUpdate:modelValue": (index) => (_tabIndex.value = index),
+        tabPosition: "left",
+      },
+      Array.from(_iconSets.entries()).map(([k, s]) => {
+        return h(
+          LayTabItem,
+          {
+            id: k,
+            title: s.title ?? s.name,
+          },
+          {
+            default: () => IconPickerFactory(s),
           }
-        }
-      }
-    }
-    if (isMatch) {
-      newList.push(obj);
-    }
+        );
+      })
+    );
   }
-  return newList;
+
+  return wrapper;
 };
 </script>
 
@@ -184,61 +189,7 @@ const searchList = (str: string, container: any) => {
       ></span>
     </div>
     <template #content>
-      <div class="layui-iconpicker-view layui-iconpicker-scroll">
-        <div v-if="showSearch" class="layui-iconpicker-search">
-          <lay-input
-            @input="search"
-            @clear="clear"
-            autocomplete="true"
-            :allow-clear="true"
-          >
-            <template #prefix>
-              <i class="layui-icon layui-icon-search"></i>
-            </template>
-          </lay-input>
-        </div>
-        <div class="layui-iconpicker-list">
-          <lay-scroll style="height: 200px" thumbColor="rgb(238, 238, 238)">
-            <ul>
-              <li
-                v-for="icon in icones"
-                :key="icon"
-                :class="[selectedIcon === icon.class ? 'layui-this' : '']"
-                @click="selectIcon(icon.class)"
-              >
-                <i class="layui-icon" :class="[icon.class]"></i>
-                <p class="layui-elip">
-                  {{ icon.name }}
-                </p>
-              </li>
-            </ul>
-          </lay-scroll>
-        </div>
-        <div v-if="page" class="layui-iconpicker-page">
-          <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
-            <span class="layui-laypage-count">共 {{ total }} 个</span
-            ><a
-              href="javascript:;"
-              class="layui-laypage-prev"
-              :class="[currentPage === 1 ? 'layui-disabled' : '']"
-              @click="prev()"
-              ><i class="layui-icon layui-icon-left"></i></a
-            ><span class="layui-laypage-curr"
-              ><em class="layui-laypage-em"></em
-              ><em>{{ currentPage }} / {{ totalPage }}</em></span
-            ><span class="layui-laypage-spr">…</span
-            ><a href="javascript:;" class="layui-laypage-last" title="尾页"
-              >14</a
-            ><a
-              href="javascript:;"
-              :class="[currentPage === totalPage ? 'layui-disabled' : '']"
-              class="layui-laypage-next"
-              @click="next()"
-              ><i class="layui-icon layui-icon-right"></i
-            ></a>
-          </div>
-        </div>
-      </div>
+      <lay-render :render="renderWrapper"></lay-render>
     </template>
   </lay-dropdown>
 </template>
diff --git a/packages/component/component/iconPicker/wrapper.vue b/packages/component/component/iconPicker/wrapper.vue
new file mode 100644
index 00000000..0ad762c5
--- /dev/null
+++ b/packages/component/component/iconPicker/wrapper.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="layui-iconpicker-view layui-iconpicker-scroll">
+    <div v-if="showSearch" class="layui-iconpicker-search">
+      <lay-input
+        @input="search"
+        @clear="clear"
+        autocomplete="true"
+        :allow-clear="true"
+      >
+        <template #prefix>
+          <i class="layui-icon layui-icon-search"></i>
+        </template>
+      </lay-input>
+    </div>
+    <div class="layui-iconpicker-list">
+      <lay-scroll style="height: 200px" thumbColor="rgb(238, 238, 238)">
+        <ul>
+          <li
+            v-for="(icon, k) in icones"
+            :key="k"
+            :class="[selectedIcon === icon.class ? 'layui-this' : '']"
+            @click="emit('selectIcon', icon.class, icon.prefix ?? prefix)"
+          >
+            <i
+              class="layui-icon"
+              :class="[icon.prefix ?? prefix, icon.class]"
+            ></i>
+            <p class="layui-elip">
+              {{ icon.name }}
+            </p>
+          </li>
+        </ul>
+      </lay-scroll>
+    </div>
+    <div v-if="page" class="layui-iconpicker-page">
+      <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
+        <span class="layui-laypage-count"> 共 {{ total }} 个</span>
+        <a
+          href="javascript:;"
+          class="layui-laypage-prev"
+          :class="[currentPage === 1 ? 'layui-disabled' : '']"
+          @click="prev()"
+        >
+          <i class="layui-icon layui-icon-left"></i>
+        </a>
+        <span class="layui-laypage-curr">
+          <em class="layui-laypage-em"></em>
+          <em>{{ currentPage }} / {{ totalPage }}</em>
+        </span>
+        <span class="layui-laypage-spr">…</span>
+        <a href="javascript:;" class="layui-laypage-last" title="尾页">
+          {{ totalPage }}
+        </a>
+        <a
+          href="javascript:;"
+          :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+          class="layui-laypage-next"
+          @click="next()"
+        >
+          <i class="layui-icon layui-icon-right"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, Ref, ref, watch } from "vue";
+import LayScroll from "../scroll/index.vue";
+import LayInput from "../input/index.vue";
+import { IconProp } from "./index.vue";
+
+defineOptions({
+  name: "LayIconPickerWrapper",
+});
+
+const emit = defineEmits(["selectIcon"]);
+const props = withDefaults(
+  defineProps<{
+    showSearch?: boolean;
+    icones: IconProp[];
+    prefix?: string;
+    selectedIcon?: string;
+    page?: boolean;
+    total?: number;
+    currentPage?: number;
+    totalPage?: number;
+  }>(),
+  {}
+);
+
+const iconSrc = computed(() => props.icones);
+const icones: Ref<Array<IconProp>> = ref(iconSrc.value);
+const total: Ref<number> = ref(icones.value.length);
+const totalPage: Ref<number> = ref(Math.ceil(total.value / 12));
+const currentPage: Ref<number> = ref(1);
+
+const pager = (page: number) => {
+  if (page < 1 || page > totalPage.value) return;
+  const start = (page - 1) * 12;
+  const end = start + 12;
+  icones.value = iconSrc.value.slice(start, end);
+};
+
+watch(
+  () => currentPage.value,
+  (newVal) => pager(newVal)
+);
+
+const next = () => {
+  if (currentPage.value === totalPage.value) return;
+  currentPage.value = currentPage.value + 1;
+};
+
+const prev = () => {
+  if (currentPage.value === 1) return;
+  currentPage.value = currentPage.value - 1;
+};
+
+const search = (text: string) => {
+  currentPage.value = 1;
+  const result = searchList(text);
+  total.value = result.length;
+  if (props.page) {
+    icones.value = result.slice(0, 12);
+    totalPage.value = Math.ceil(result.length / 12);
+  } else {
+    icones.value = result;
+    totalPage.value = result.length;
+  }
+};
+
+const searchList = (str: string) => {
+  if (!str) return iconSrc.value;
+  const reg = new RegExp(str, "g");
+  return iconSrc.value.filter(
+    (a) => a.class.match(reg)?.length || a.name.match(reg)?.length
+  );
+};
+
+const clear = () => search("");
+
+if (props.page) {
+  pager(1);
+
+  props.selectedIcon &&
+    (currentPage.value =
+      Math.ceil(
+        iconSrc.value.findIndex((a) => a.class === props.selectedIcon) / 12
+      ) || 1);
+}
+</script>
diff --git a/packages/icons/src/iconfont/iconfont.ts b/packages/icons/src/iconfont/iconfont.ts
index 234432be..45060555 100644
--- a/packages/icons/src/iconfont/iconfont.ts
+++ b/packages/icons/src/iconfont/iconfont.ts
@@ -1,4 +1,6 @@
-export default [
+import { IconProp } from "../../../component/component/iconPicker/index.vue";
+
+const LayuiIconList: IconProp[] = [
   { name: "实心", class: "layui-icon-heart-fill" },
   { name: "空心", class: "layui-icon-heart" },
   { name: "亮度/晴", class: "layui-icon-light" },
@@ -187,3 +189,5 @@ export default [
   { name: "闭眼", class: "layui-icon-eye-invisible" },
   { name: "眼睛", class: "layui-icon-eye" },
 ];
+
+export default LayuiIconList;
-- 
Gitee


From c6e56bc586ddab307f0fc6589c586c120e440c14 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Thu, 17 Oct 2024 17:36:49 +0800
Subject: [PATCH 2/5] chore: code update

---
 .../document/zh-CN/components/iconPicker.md   | 22 +++++++++++++------
 .../component/component/iconPicker/index.vue  |  1 +
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/src/document/zh-CN/components/iconPicker.md b/docs/src/document/zh-CN/components/iconPicker.md
index 758e27b8..b7c69913 100644
--- a/docs/src/document/zh-CN/components/iconPicker.md
+++ b/docs/src/document/zh-CN/components/iconPicker.md
@@ -10,7 +10,7 @@
 ::: title 基础使用
 :::
 
-::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+::: demo 使用 `lay-icon-picker` 标签, 创建图标选择器
 
 <template>
   <lay-icon-picker v-model="icon"></lay-icon-picker>
@@ -36,10 +36,10 @@ export default {
 ::: title 禁用选择
 :::
 
-::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+::: demo 使用 `disabled` 属性, 禁用图标选择器
 
 <template>
-  <lay-icon-picker v-model="icon" :disabled="true"></lay-icon-picker>
+  <lay-icon-picker v-model="icon" disabled></lay-icon-picker>
 </template>
 
 <script>
@@ -62,7 +62,7 @@ export default {
 ::: title 选择清空
 :::
 
-::: demo 使用 lay-icon-picker 标签, 创建图标选择器
+::: demo 可以传入 `allow-clear` 属性来开启选择清空功能
 
 <template>
   <lay-icon-picker v-model="icon" :allow-clear="true"></lay-icon-picker>
@@ -114,10 +114,10 @@ export default {
 ::: title 开启搜索
 :::
 
-::: demo 通过 showSearch 开启图标列表的搜索功能
+::: demo 通过 `show-search` 开启图标列表的搜索功能
 
 <template>
-  <lay-icon-picker v-model="icon" page showSearch></lay-icon-picker>
+  <lay-icon-picker v-model="icon" page show-search></lay-icon-picker>
 </template>
 
 <script>
@@ -146,6 +146,8 @@ export default {
   <lay-space direction="vertical">
     <lay-space>
       <lay-checkbox v-model="showIconSets">展示图标集</lay-checkbox>
+      <lay-checkbox v-model="allowSearch">允许搜索</lay-checkbox>
+      <lay-checkbox v-model="enablePage">开启分页</lay-checkbox>
       <lay-select v-model="currentIconSet">
         <lay-select-option value="layui">Layui</lay-select-option>
         <lay-select-option value="bs">Bootstrap Icons</lay-select-option>
@@ -155,6 +157,8 @@ export default {
       v-model="icon10"
       type="layui-icon-face-smile"
       :icon-sets="iconSet"
+      :show-search="allowSearch"
+      :page="enablePage"
       :show-icon-sets="showIconSets"
       :current-icon-set="currentIconSet"
     ></lay-icon-picker>
@@ -173,6 +177,8 @@ export default {
     const showIconSets = ref(true);
     const icon10 = ref("bi-0-circle");
     const currentIconSet = ref("bs");
+    const allowSearch = ref(true);
+    const enablePage = ref(true);
     const iconSet = ref([
       "layui",
       {
@@ -276,7 +282,9 @@ export default {
       icon10,
       iconSet,
       showIconSets,
-      currentIconSet
+      currentIconSet,
+      allowSearch,
+      enablePage,
     };
   },
 };
diff --git a/packages/component/component/iconPicker/index.vue b/packages/component/component/iconPicker/index.vue
index 6ebf4412..8622b716 100644
--- a/packages/component/component/iconPicker/index.vue
+++ b/packages/component/component/iconPicker/index.vue
@@ -133,6 +133,7 @@ const renderWrapper = () => {
     wrapper = h(
       LayTab,
       {
+        type: "brief",
         modelValue: _tabIndex.value,
         "onUpdate:modelValue": (index) => (_tabIndex.value = index),
         tabPosition: "left",
-- 
Gitee


From 834d2eb1baa60f5b09035a52dd22b3640d41bf33 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Fri, 1 Nov 2024 13:35:23 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix(component/LayIconPicker):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=AD=90=E7=BB=84=E4=BB=B6=E6=B8=B2=E6=9F=93=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/component/component/iconPicker/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/component/component/iconPicker/index.vue b/packages/component/component/iconPicker/index.vue
index 8622b716..e1f5a652 100644
--- a/packages/component/component/iconPicker/index.vue
+++ b/packages/component/component/iconPicker/index.vue
@@ -134,7 +134,7 @@ const renderWrapper = () => {
       LayTab,
       {
         type: "brief",
-        modelValue: _tabIndex.value,
+        modelValue: _tabIndex.value ?? "layui",
         "onUpdate:modelValue": (index) => (_tabIndex.value = index),
         tabPosition: "left",
       },
@@ -192,7 +192,7 @@ const renderWrapper = () => {
       ></span>
     </div>
     <template #content>
-      <lay-render :render="renderWrapper"></lay-render>
+      <lay-render v-if="openState" :render="renderWrapper"></lay-render>
     </template>
   </lay-dropdown>
 </template>
-- 
Gitee


From 7f033e44dec9f2e13e8e06a7c6419a0b91680650 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Fri, 6 Dec 2024 23:23:26 +0800
Subject: [PATCH 4/5] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=90=8D=E7=A7=B0=EF=BC=8C=E5=8E=BB=E9=99=A4=20icon?=
 =?UTF-8?q?=20=E5=88=97=E8=A1=A8=E7=B1=BB=E5=9E=8B=E6=A0=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/component/iconPicker/index.vue  | 22 +++----
 .../component/iconPicker/wrapper.vue          | 58 +++++++++----------
 packages/icons/src/iconfont/iconfont.ts       |  4 +-
 3 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/packages/component/component/iconPicker/index.vue b/packages/component/component/iconPicker/index.vue
index e1f5a652..3669c169 100644
--- a/packages/component/component/iconPicker/index.vue
+++ b/packages/component/component/iconPicker/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import "./index.less";
 import type { DropdownTeleportProps } from "../dropdown/interface";
-import { computed, h, Ref, ref, StyleValue } from "vue";
+import { computed, h, ref, StyleValue } from "vue";
 import { LayIconList as icons, LayIcon } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
 import useProps from "./index.hooks";
@@ -138,18 +138,14 @@ const renderWrapper = () => {
         "onUpdate:modelValue": (index) => (_tabIndex.value = index),
         tabPosition: "left",
       },
-      Array.from(_iconSets.entries()).map(([k, s]) => {
-        return h(
-          LayTabItem,
-          {
-            id: k,
-            title: s.title ?? s.name,
-          },
-          {
-            default: () => IconPickerFactory(s),
-          }
-        );
-      })
+      () =>
+        Array.from(_iconSets.entries()).map(([k, s]) => {
+          return h(
+            LayTabItem,
+            { id: k, title: s.title ?? s.name },
+            { default: () => IconPickerFactory(s) }
+          );
+        })
     );
   }
 
diff --git a/packages/component/component/iconPicker/wrapper.vue b/packages/component/component/iconPicker/wrapper.vue
index 0ad762c5..5c8908a8 100644
--- a/packages/component/component/iconPicker/wrapper.vue
+++ b/packages/component/component/iconPicker/wrapper.vue
@@ -16,7 +16,7 @@
       <lay-scroll style="height: 200px" thumbColor="rgb(238, 238, 238)">
         <ul>
           <li
-            v-for="(icon, k) in icones"
+            v-for="(icon, k) in _iconList"
             :key="k"
             :class="[selectedIcon === icon.class ? 'layui-this' : '']"
             @click="emit('selectIcon', icon.class, icon.prefix ?? prefix)"
@@ -34,26 +34,26 @@
     </div>
     <div v-if="page" class="layui-iconpicker-page">
       <div id="layui-laypage-1" class="layui-laypage layui-laypage-default">
-        <span class="layui-laypage-count"> 共 {{ total }} 个</span>
+        <span class="layui-laypage-count"> 共 {{ _total }} 个</span>
         <a
           href="javascript:;"
           class="layui-laypage-prev"
-          :class="[currentPage === 1 ? 'layui-disabled' : '']"
+          :class="[_currentPage === 1 ? 'layui-disabled' : '']"
           @click="prev()"
         >
           <i class="layui-icon layui-icon-left"></i>
         </a>
         <span class="layui-laypage-curr">
           <em class="layui-laypage-em"></em>
-          <em>{{ currentPage }} / {{ totalPage }}</em>
+          <em>{{ _currentPage }} / {{ _totalPage }}</em>
         </span>
         <span class="layui-laypage-spr">…</span>
         <a href="javascript:;" class="layui-laypage-last" title="尾页">
-          {{ totalPage }}
+          {{ _totalPage }}
         </a>
         <a
           href="javascript:;"
-          :class="[currentPage === totalPage ? 'layui-disabled' : '']"
+          :class="[_currentPage === _totalPage ? 'layui-disabled' : '']"
           class="layui-laypage-next"
           @click="next()"
         >
@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, Ref, ref, watch } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import LayScroll from "../scroll/index.vue";
 import LayInput from "../input/index.vue";
 import { IconProp } from "./index.vue";
@@ -89,51 +89,51 @@ const props = withDefaults(
   {}
 );
 
-const iconSrc = computed(() => props.icones);
-const icones: Ref<Array<IconProp>> = ref(iconSrc.value);
-const total: Ref<number> = ref(icones.value.length);
-const totalPage: Ref<number> = ref(Math.ceil(total.value / 12));
-const currentPage: Ref<number> = ref(1);
+const _iconSrc = computed(() => props.icones);
+const _iconList: Ref<Array<IconProp>> = ref(_iconSrc.value);
+const _total: Ref<number> = ref(_iconList.value.length);
+const _totalPage: Ref<number> = ref(Math.ceil(_total.value / 12));
+const _currentPage: Ref<number> = ref(1);
 
 const pager = (page: number) => {
-  if (page < 1 || page > totalPage.value) return;
+  if (page < 1 || page > _totalPage.value) return;
   const start = (page - 1) * 12;
   const end = start + 12;
-  icones.value = iconSrc.value.slice(start, end);
+  _iconList.value = _iconSrc.value.slice(start, end);
 };
 
 watch(
-  () => currentPage.value,
+  () => _currentPage.value,
   (newVal) => pager(newVal)
 );
 
 const next = () => {
-  if (currentPage.value === totalPage.value) return;
-  currentPage.value = currentPage.value + 1;
+  if (_currentPage.value === _totalPage.value) return;
+  _currentPage.value = _currentPage.value + 1;
 };
 
 const prev = () => {
-  if (currentPage.value === 1) return;
-  currentPage.value = currentPage.value - 1;
+  if (_currentPage.value === 1) return;
+  _currentPage.value = _currentPage.value - 1;
 };
 
 const search = (text: string) => {
-  currentPage.value = 1;
+  _currentPage.value = 1;
   const result = searchList(text);
-  total.value = result.length;
+  _total.value = result.length;
   if (props.page) {
-    icones.value = result.slice(0, 12);
-    totalPage.value = Math.ceil(result.length / 12);
+    _iconList.value = result.slice(0, 12);
+    _totalPage.value = Math.ceil(result.length / 12);
   } else {
-    icones.value = result;
-    totalPage.value = result.length;
+    _iconList.value = result;
+    _totalPage.value = result.length;
   }
 };
 
 const searchList = (str: string) => {
-  if (!str) return iconSrc.value;
+  if (!str) return _iconSrc.value;
   const reg = new RegExp(str, "g");
-  return iconSrc.value.filter(
+  return _iconSrc.value.filter(
     (a) => a.class.match(reg)?.length || a.name.match(reg)?.length
   );
 };
@@ -144,9 +144,9 @@ if (props.page) {
   pager(1);
 
   props.selectedIcon &&
-    (currentPage.value =
+    (_currentPage.value =
       Math.ceil(
-        iconSrc.value.findIndex((a) => a.class === props.selectedIcon) / 12
+        _iconSrc.value.findIndex((a) => a.class === props.selectedIcon) / 12
       ) || 1);
 }
 </script>
diff --git a/packages/icons/src/iconfont/iconfont.ts b/packages/icons/src/iconfont/iconfont.ts
index 45060555..f9e7c923 100644
--- a/packages/icons/src/iconfont/iconfont.ts
+++ b/packages/icons/src/iconfont/iconfont.ts
@@ -1,6 +1,4 @@
-import { IconProp } from "../../../component/component/iconPicker/index.vue";
-
-const LayuiIconList: IconProp[] = [
+const LayuiIconList = [
   { name: "实心", class: "layui-icon-heart-fill" },
   { name: "空心", class: "layui-icon-heart" },
   { name: "亮度/晴", class: "layui-icon-light" },
-- 
Gitee


From 5e27920f2ba4b7cf03d27deeec682ac66b514b63 Mon Sep 17 00:00:00 2001
From: SpikeMeow <5637753+colisys@user.noreply.gitee.com>
Date: Fri, 6 Dec 2024 23:38:55 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/component/component/iconPicker/wrapper.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/component/component/iconPicker/wrapper.vue b/packages/component/component/iconPicker/wrapper.vue
index 5c8908a8..03d37c1a 100644
--- a/packages/component/component/iconPicker/wrapper.vue
+++ b/packages/component/component/iconPicker/wrapper.vue
@@ -53,7 +53,7 @@
         </a>
         <a
           href="javascript:;"
-          :class="[_currentPage === _totalPage ? 'layui-disabled' : '']"
+          :class="[_currentPage >= _totalPage ? 'layui-disabled' : '']"
           class="layui-laypage-next"
           @click="next()"
         >
@@ -108,7 +108,7 @@ watch(
 );
 
 const next = () => {
-  if (_currentPage.value === _totalPage.value) return;
+  if (_currentPage.value >= _totalPage.value) return;
   _currentPage.value = _currentPage.value + 1;
 };
 
@@ -143,10 +143,12 @@ const clear = () => search("");
 if (props.page) {
   pager(1);
 
+  const _iconCurPos = _iconSrc.value.findIndex(
+    (a) => a.class === props.selectedIcon
+  );
+
   props.selectedIcon &&
     (_currentPage.value =
-      Math.ceil(
-        _iconSrc.value.findIndex((a) => a.class === props.selectedIcon) / 12
-      ) || 1);
+      Math.ceil(_iconCurPos / 12) + (_iconCurPos % 12 ? 0 : 1) || 1);
 }
 </script>
-- 
Gitee