✨(all): update

package/component/src/component/dropdown/index.vue

@@ -19,18 +19,18 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
   disabled: false,
 });
-const emit = defineEmits(["open", "hide"]);
+
 const openState = ref(false);
 const dropdownRef = ref<null | HTMLElement>(null);
 const dropdownX = ref<number | string>(0);
 const dropdownY = ref<number | string>("auto");
-
+const emit = defineEmits(["open", "hide"]);
 // @ts-ignore
 onClickOutside(dropdownRef, (event) => {
   openState.value = false;
 });
 
-const open = function (event?: Event) {
+const open = function (event?: Event) : void {
   if (props.disabled === false) {
     if (event) {
       const el = event.currentTarget;
@@ -47,12 +47,12 @@ const open = function (event?: Event) {
   }
 };
 
-const hide = function () {
+const hide = function () : void {
   openState.value = false;
   emit("hide");
 };
 
-const toggle = function (event?: Event) {
+const toggle = function (event?: Event) : void {
   if (props.disabled === false)
     if (openState.value) {
       hide();

package/component/src/component/dropdownMenu/index.vue

@@ -8,4 +8,4 @@
 export default {
   name: "LayDropdownMenu",
 };
-</script>
+</script>

package/component/src/component/footer/index.ts

@@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
 import Component from "./index.vue";
 
 const component: WithInstallType<typeof Component> = withInstall(Component);
-export default component;
+export default component;

package/component/src/component/formItem/index.vue

@@ -24,9 +24,7 @@ import Schema, {
   Rule,
   RuleItem,
   Rules,
-  ValidateCallback,
-  ValidateError,
-  ValidateMessages,
+  ValidateCallback
 } from "async-validator";
 import cnValidateMessage from "./cnValidateMessage";
 

package/component/src/component/fullscreen/index.ts

@@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
 import Component from "./index.vue";
 
 const component: WithInstallType<typeof Component> = withInstall(Component);
-export default component;
+export default component;

package/component/src/component/header/index.ts

@@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
 import Component from "./index.vue";
 
 const component: WithInstallType<typeof Component> = withInstall(Component);
-export default component;
+export default component;

package/component/src/component/header/index.vue

@@ -12,4 +12,4 @@ import "./index.less";
   <div class="layui-header">
     <slot></slot>
   </div>
-</template>
+</template>

package/component/src/component/iconPicker/index.less

@@ -59,10 +59,6 @@
   transform: rotate(180deg);
 }
 
-.layui-iconpicker-none {
-  color: rgba(0, 0, 0, 0.5);
-}
-
 .layui-iconpicker-search {
   padding: 10px;
   box-shadow: 0 2px 8px #f0f1f2;

package/component/src/component/iconPicker/index.ts

@@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
 import Component from "./index.vue";
 
 const component: WithInstallType<typeof Component> = withInstall(Component);
-export default component;
+export default component;

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

@@ -9,6 +9,7 @@ import "./index.less";
 import { Ref, ref } from "vue";
 import { LayIconList as icons } from "@layui/icons-vue";
 import LayDropdown from "../dropdown/index.vue";
+import layInput from "../input/index.vue";
 
 export interface LayIconPickerProps {
   page?: boolean;
@@ -21,21 +22,22 @@ const props = withDefaults(defineProps<LayIconPickerProps>(), {
   page: false,
 });
 
-const emit = defineEmits(["update:modelValue"]);
-const dropdownRef = ref<null | HTMLElement>(null);
+const emit = defineEmits(["update:modelValue", "change"]);
 const selectedIcon: Ref<string> = ref(props.modelValue as string);
+const dropdownRef = ref<any>(null);
 
 const selectIcon = function (icon: string) {
   emit("update:modelValue", icon);
+  emit("change", icon);
   selectedIcon.value = icon;
-  // @ts-ignore
-  dropdownRef.value.hide();
+  dropdownRef.value?.hide();
 };
 
 const icones: Ref = ref([]);
 const total = ref(icons.length);
 const totalPage = ref(total.value / 12);
 const currentPage: Ref = ref(1);
+const searchValue = ref();
 
 if (props.page) {
   icones.value = icons.slice(0, 12);
@@ -63,20 +65,24 @@ const prev = function () {
   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 search = function (e: any) {
-  var text = e.target.value;
   currentPage.value = 1;
   const start = (currentPage.value - 1) * 12;
   const end = start + 12;
-  if (text === "") {
-    if (props.page) {
-      icones.value = icons.slice(start, end);
-      total.value = icons.length;
-      totalPage.value = Math.ceil(icons.length / 12);
-    } else {
-      icones.value = icons;
-    }
-  } else {
+  const text = e.target.value;
+  if (text) {
     if (props.page) {
       icones.value = searchList(text, icons).slice(start, end);
       total.value = searchList(text, icons).length;
@@ -84,6 +90,14 @@ const search = function (e: any) {
     } else {
       icones.value = searchList(text, icons);
     }
+  } 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;
+    }
   }
 };
 
@@ -135,23 +149,17 @@ const searchList = function (str: string, container: any) {
     <template #content>
       <div class="layui-iconpicker-view layui-iconpicker-scroll">
         <div v-if="showSearch" class="layui-iconpicker-search">
-          <div class="layui-form layui-input-wrap layui-input-wrap-prefix">
-            <div class="layui-input-prefix">
+          <lay-input
+            @input="search"
+            @clear="clear"
+            v-model="searchValue"
+            :autocomplete="true"
+            :allow-clear="true"
+          >
+            <template #prefix>
               <i class="layui-icon layui-icon-search"></i>
-            </div>
-            <input
-              type="text"
-              value=""
-              placeholder="search"
-              autocomplete="off"
-              class="layui-input"
-              lay-affix="clear"
-              @input="search"
-            />
-            <div class="layui-input-suffix layui-input-affix-event layui-hide">
-              <i class="layui-icon layui-icon-clear"></i>
-            </div>
-          </div>
+            </template>
+          </lay-input>
         </div>
         <div class="layui-iconpicker-list">
           <ul>

package/component/src/component/input/index.less

@@ -39,10 +39,11 @@
 }
 
 .layui-input-clear {
-  display: flex;
   flex: none;
+  display: flex;
   align-items: center;
   padding-right: 10px;
+  color: rgba(0, 0, 0, 0.45)
 }
 
 .layui-input:hover {
@@ -55,4 +56,4 @@
 
 .layui-input::-webkit-input-placeholder {
   line-height: 1.3;
-}
+}

package/component/src/component/input/index.ts

@@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
 import Component from "./index.vue";
 
 const component: WithInstallType<typeof Component> = withInstall(Component);
-export default component;
+export default component;

package/component/src/component/input/index.vue

@@ -7,11 +7,12 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
-import { useSlots } from "vue";
+import { computed, useSlots } from "vue";
 import { useI18n } from "../../language";
 
 const { t } = useI18n();
 const slots = useSlots();
+const hasContent = computed(() => props.modelValue?.length > 0);
 
 export interface LayInputProps {
   name?: string;
@@ -36,9 +37,10 @@ const props = withDefaults(defineProps<LayInputProps>(), {
 
 const emit = defineEmits([
   "update:modelValue",
-  "input",
   "change",
+  "input",
   "focus",
+  "clear",
   "blur",
 ]);
 
@@ -50,7 +52,8 @@ const onInput = function (event: Event) {
 };
 
 const onClear = () => {
-  emit("update:modelValue", "");
+  emit("update:modelValue");
+  emit("clear");
 };
 
 const onFocus = (event: Event) => {
@@ -64,6 +67,10 @@ const onChange = (event: Event) => {
 const onBlur = (event: Event) => {
   emit("blur", event);
 };
+
+const classes = computed(() => {
+  return { "layui-disabled": props.disabled };
+});
 </script>
 
 <template>
@@ -80,7 +87,7 @@ const onBlur = (event: Event) => {
       :autofocus="autofocus"
       :autocomplete="autocomplete"
       :readonly="readonly"
-      :class="{ 'layui-disabled': disabled }"
+      :class="classes"
       class="layui-input"
       @input="onInput"
       @focus="onFocus"
@@ -90,8 +97,8 @@ const onBlur = (event: Event) => {
     <span class="layui-input-suffix" v-if="slots.suffix">
       <slot name="suffix"></slot>
     </span>
-    <span class="layui-input-clear" v-if="allowClear">
+    <span class="layui-input-clear" v-if="allowClear && hasContent">
       <lay-icon type="layui-icon-close-fill" @click="onClear"></lay-icon>
     </span>
   </div>
-</template>
+</template>

package/component/src/component/inputNumber/index.vue

@@ -33,8 +33,8 @@ const props = withDefaults(defineProps<LayInputNumberProps>(), {
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
-
 let num = ref(props.modelValue);
+
 watch(num, (val) => {
   if (props.max !== Infinity && val > props.max) {
     num.value = props.max;

package/component/src/component/layout/index.vue

@@ -38,4 +38,4 @@ const classes = computed(() => {
   <section :class="classes">
     <slot></slot>
   </section>
-</template>
+</template>