Merge branch 'next' into doc-demand

package/component/src/component/checkbox/index.less

@@ -1,3 +1,7 @@
+.layui-checkbox input[type="checkbox"] {
+  display: none;
+}
+
 .layui-form-checkbox {
   position: relative;
   height: 30px;

package/component/src/component/checkbox/index.vue

@@ -94,7 +94,7 @@ const handleClick = function () {
 </script>
 
 <template>
-  <span @click.stop="handleClick">
+  <span @click.stop="handleClick" class="layui-checkbox">
     <input type="checkbox" :name="name" :value="label" />
     <div
       class="layui-unselect layui-form-checkbox"

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

@@ -22,9 +22,17 @@ export interface LayInputProps {
   modelValue?: string;
   placeholder?: string;
   allowClear?: boolean;
+  autofocus?: boolean;
+  autocomplete?: boolean;
 }
 
-const props = withDefaults(defineProps<LayInputProps>(), {});
+const props = withDefaults(defineProps<LayInputProps>(), {
+  disabled: false,
+  readonly: false,
+  allowClear: false,
+  autofocus: false,
+  autocomplete: false,
+});
 
 const emit = defineEmits([
   "update:modelValue",
@@ -34,9 +42,10 @@ const emit = defineEmits([
   "blur",
 ]);
 
-const onInput = function (event: InputEvent) {
+const onInput = function (event: Event) {
   const inputElement = event.target as HTMLInputElement;
-  emit("update:modelValue", inputElement.value);
+  const value = inputElement.value;
+  emit("update:modelValue", value);
   emit("input", event);
 };
 
@@ -44,16 +53,16 @@ const onClear = () => {
   emit("update:modelValue", "");
 };
 
-const onFocus = (event: FocusEvent) => {
+const onFocus = (event: Event) => {
   emit("focus", event);
 };
 
-const onChange = () => {
-  emit("change");
+const onChange = (event: Event) => {
+  emit("change", event);
 };
 
-const onBlur = () => {
-  emit("blur");
+const onBlur = (event: Event) => {
+  emit("blur", event);
 };
 </script>
 
@@ -68,13 +77,15 @@ const onBlur = () => {
       :value="modelValue || value"
       :disabled="disabled"
       :placeholder="placeholder"
+      :autofocus="autofocus"
+      :autocomplete="autocomplete"
+      :readonly="readonly"
       :class="{ 'layui-disabled': disabled }"
       class="layui-input"
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
       @change="onChange"
-      :readonly="props.readonly"
     />
     <span class="layui-input-suffix" v-if="slots.suffix">
       <slot name="suffix"></slot>

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

@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import layButton from "../button/index.vue";
+import "./index.less";
 import layInput from "../input/index.vue";
 import { LayIcon } from "@layui/icons-vue";
-import "./index.less";
+import layButton from "../button/index.vue";
 import { ref, watch, withDefaults, computed } from "vue";
 
 export interface LayInputNumberProps {
@@ -65,6 +65,7 @@ let timer: any = 0;
 const minControl = computed(
   () => props.min !== -Infinity && Number(props.min) >= num.value
 );
+
 const maxControl = computed(
   () => props.max !== Infinity && Number(props.max) <= num.value
 );

package/component/src/component/menu/index.vue

@@ -5,7 +5,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, provide, ref, watch } from "vue";
+import {
+  computed,
+  ComputedRef,
+  provide,
+  Ref,
+  ref,
+  watch,
+  WritableComputedRef,
+} from "vue";
 import "./index.less";
 
 export interface LayMenuProps {
@@ -39,10 +47,12 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
   childSpacing: false,
 });
 
-const isTree = computed(() => props.tree);
-const isCollapse = computed(() => props.collapse);
-const isCollapseTransition = computed(() => props.collapseTransition);
-let oldOpenKeys = ref<string[]>(props.openKeys);
+const isTree: ComputedRef = computed(() => props.tree);
+const isCollapse: ComputedRef = computed(() => props.collapse);
+const isCollapseTransition: ComputedRef = computed(
+  () => props.collapseTransition
+);
+const oldOpenKeys: Ref = ref<string[]>(props.openKeys);
 
 const openKeys = computed({
   get() {

package/component/src/component/radio/index.less

@@ -1,3 +1,7 @@
+.layui-radio input[type="radio"]{
+  display: none;
+}
+
 .layui-form-radio,
 .layui-form-radio * {
   display: inline-block;

package/component/src/component/radio/index.vue

@@ -28,7 +28,7 @@ const handleClick = function () {
 </script>
 
 <template>
-  <span>
+  <span class="layui-radio">
     <input type="radio" :value="label" :name="name" />
     <div
       class="layui-unselect layui-form-radio"

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

@@ -60,7 +60,6 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
   line-height: 1.3;
 }
 
-
 .layui-form-select {
   .layui-input {
     border: 1px solid #eeeeee;

package/component/src/component/side/index.vue

@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<LaySideProps>(), {
 
 const styles = computed<CSSProperties>(() => {
   return {
-    "flex": `0 0 ${props.width}`,
-    "width": `${props.width}`
+    flex: `0 0 ${props.width}`,
+    width: `${props.width}`,
   };
 });
 </script>

package/component/src/component/subMenu/index.vue

@@ -48,11 +48,13 @@ watch(isOpen, () => {
 
 const openHandle = function () {
   if (!isCollapse.value) {
+    let newOpenKeys = [...openKeys.value];
     if (openKeys.value.includes(props.id)) {
-      openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
+      newOpenKeys.splice(newOpenKeys.indexOf(props.id), 1);
     } else {
-      openKeys.value.push(props.id);
+      newOpenKeys.push(props.id);
     }
+    openKeys.value = newOpenKeys;
   }
 };
 

package/component/src/theme/public.less

@@ -178,12 +178,6 @@ a cite {
   border-color: var(--global-neutral-color-3);
 }
 
-.layui-form input[type="checkbox"],
-.layui-form input[type="radio"],
-.layui-form select {
-  display: none;
-}
-
 .layui-form-checkbox,
 .layui-form-checkbox *,
 .layui-form-switch {