types(Search): missing some props in jsx (#8485)

src/field/Field.tsx

@@ -54,65 +54,70 @@ import type {
 
 const [name, bem] = createNamespace('field');
 
+// provide to Search component to inherit
+export const fieldProps = {
+  formatter: Function as PropType<(value: string) => string>,
+  leftIcon: String,
+  rightIcon: String,
+  clearable: Boolean,
+  maxlength: [Number, String],
+  inputAlign: String as PropType<FieldTextAlign>,
+  placeholder: String,
+  errorMessage: String,
+  error: {
+    type: Boolean,
+    default: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: null,
+  },
+  readonly: {
+    type: Boolean,
+    default: null,
+  },
+  clearIcon: {
+    type: String,
+    default: 'clear',
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  clearTrigger: {
+    type: String as PropType<FieldClearTrigger>,
+    default: 'focus',
+  },
+  formatTrigger: {
+    type: String as PropType<FieldFormatTrigger>,
+    default: 'onChange',
+  },
+};
+
 export default defineComponent({
   name,
 
   props: {
     ...cellProps,
+    ...fieldProps,
     rows: [Number, String],
     name: String,
     rules: Array as PropType<FieldRule[]>,
     autosize: [Boolean, Object] as PropType<boolean | FieldAutosizeConfig>,
-    leftIcon: String,
-    rightIcon: String,
-    clearable: Boolean,
-    formatter: Function as PropType<(value: string) => string>,
-    maxlength: [Number, String],
     labelWidth: [Number, String],
     labelClass: UnknownProp,
     labelAlign: String as PropType<FieldTextAlign>,
-    inputAlign: String as PropType<FieldTextAlign>,
-    placeholder: String,
     autocomplete: String,
-    errorMessage: String,
-    errorMessageAlign: String as PropType<FieldTextAlign>,
     showWordLimit: Boolean,
+    errorMessageAlign: String as PropType<FieldTextAlign>,
     type: {
       type: String as PropType<FieldType>,
       default: 'text',
     },
-    error: {
-      type: Boolean,
-      default: null,
-    },
     colon: {
       type: Boolean,
       default: null,
     },
-    disabled: {
-      type: Boolean,
-      default: null,
-    },
-    readonly: {
-      type: Boolean,
-      default: null,
-    },
-    clearIcon: {
-      type: String,
-      default: 'clear',
-    },
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    clearTrigger: {
-      type: String as PropType<FieldClearTrigger>,
-      default: 'focus',
-    },
-    formatTrigger: {
-      type: String as PropType<FieldFormatTrigger>,
-      default: 'onChange',
-    },
   },
 
   emits: [

src/search/Search.tsx

@@ -1,4 +1,4 @@
-import { ref, PropType, CSSProperties, defineComponent } from 'vue';
+import { ref, PropType, defineComponent } from 'vue';
 
 // Utils
 import {
@@ -7,6 +7,7 @@ import {
   preventDefault,
   ComponentInstance,
 } from '../utils';
+import { fieldProps } from '../field/Field';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
@@ -14,9 +15,6 @@ import { useExpose } from '../composables/use-expose';
 // Components
 import { Field } from '../field';
 
-// Types
-import type { FieldClearTrigger, FieldFormatTrigger } from '../field/types';
-
 const [name, bem, t] = createNamespace('search');
 
 export type SearchShape = 'square' | 'round';
@@ -24,20 +22,12 @@ export type SearchShape = 'square' | 'round';
 export default defineComponent({
   name,
 
-  inheritAttrs: false,
-
   props: {
+    ...fieldProps,
     label: String,
-    clearIcon: String,
-    rightIcon: String,
-    formatter: Function as PropType<(value: string) => string>,
-    modelValue: String,
     actionText: String,
     background: String,
     showAction: Boolean,
-    errorMessage: String,
-    clearTrigger: String as PropType<FieldClearTrigger>,
-    formatTrigger: String as PropType<FieldFormatTrigger>,
     shape: {
       type: String as PropType<SearchShape>,
       default: 'square',
@@ -101,24 +91,14 @@ export default defineComponent({
     const blur = () => filedRef.value?.blur();
     const focus = () => filedRef.value?.focus();
 
-    const fieldPropNames = [
+    const fieldPropNames = Object.keys(fieldProps) as Array<
-      'leftIcon',
+      keyof typeof fieldProps
-      'clearIcon',
+    >;
-      'rightIcon',
-      'formatter',
-      'clearable',
-      'modelValue',
-      'clearTrigger',
-      'errorMessage',
-      'formatTrigger',
-    ] as const;
 
     const renderField = () => {
       const fieldAttrs = {
         ...attrs,
         ...pick(props, fieldPropNames),
-        style: null,
-        class: null,
       };
 
       const onInput = (value: string) => emit('update:modelValue', value);
@@ -140,11 +120,8 @@ export default defineComponent({
 
     return () => (
       <div
-        class={[bem({ 'show-action': props.showAction }), attrs.class]}
+        class={bem({ 'show-action': props.showAction })}
-        style={{
+        style={{ background: props.background }}
-          background: props.background,
-          ...(attrs.style as CSSProperties),
-        }}
       >
         {slots.left?.()}
         <div class={bem('content', props.shape)}>