feat(comp:input): the trim supports global configuration (#1089)

fix #1086, fix #1087
IDuxFE · Aug 23, 2022 · efe2f8d · efe2f8d
1 parent aef12af
commit efe2f8d
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 5 deletions.
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -128,6 +128,7 @@ export const defaultConfig: GlobalConfig = {
     clearable: false,
     clearIcon: 'close-circle',
     size: 'md',
+    trim: false,
   },
   inputNumber: {
     keyboard: true,
@@ -317,6 +318,7 @@ export const defaultConfig: GlobalConfig = {
     resize: 'vertical',
     showCount: false,
     size: 'md',
+    trim: false,
   },
   timePicker: {
     borderless: false,

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -241,6 +241,7 @@ export interface InputConfig {
   clearable: boolean
   clearIcon: string
   size: FormSize
+  trim: boolean
 }
 
 export interface InputNumberConfig {
@@ -482,6 +483,7 @@ export interface TextareaConfig {
   resize: TextareaResize
   size: FormSize
   showCount: boolean
+  trim: boolean
 }
 
 export interface TimePickerConfig {

diff --git a/packages/components/input/docs/Api.zh.md b/packages/components/input/docs/Api.zh.md
@@ -20,6 +20,6 @@
 | `readonly` | 是否只读状态 | `boolean` | `false` | - | - |
 | `size` | 设置大小 | `'sm' \| 'md' \| 'lg'` | `'md'` | ✅ | - |
 | `suffix` | 设置后缀图标 | `string \| #suffix` | - | - | - |
-| `trim` | 失去焦点后自动去除前后空格  | `boolean` | `false` | - | - |
+| `trim` | 失去焦点后自动去除前后空格  | `boolean` | `false` | ✅ | - |
 | `onChange` | 值发生改变后的回调 | `(value: string, oldValue: string) => void` | - | - | - |
 | `onClear` | 清除图标被点击后的回调 | `(evt: MouseEvent) => void` | - | - | - |
diff --git a/packages/components/input/src/types.ts b/packages/components/input/src/types.ts
@@ -22,7 +22,7 @@ export const commonProps = {
   disabled: { type: Boolean, default: false },
   readonly: { type: Boolean, default: false },
   size: { type: String as PropType<FormSize>, default: undefined },
-  trim: { type: Boolean, default: false },
+  trim: { type: Boolean, default: undefined },
 
   // events
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<(value: string) => void>>,

diff --git a/packages/components/input/src/useInput.ts b/packages/components/input/src/useInput.ts
@@ -37,14 +37,15 @@ export interface InputContext<T extends HTMLInputElement | HTMLTextAreaElement>
 
 export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement | HTMLTextAreaElement>(
   props: CommonProps,
-  config: { clearable: boolean; clearIcon: string },
+  config: { clearable: boolean; clearIcon: string; trim: boolean },
 ): InputContext<T> {
   const { accessor, control } = useAccessorAndControl()
   useFormItemRegister(control)
 
   const clearable = computed(() => props.clearable ?? config.clearable)
   const clearIcon = computed(() => props.clearIcon ?? config.clearIcon)
   const clearVisible = computed(() => !accessor.disabled && !props.readonly && !!accessor.value)
+  const mergedTrim = computed(() => props.trim ?? config.trim)
 
   const isFocused = ref(false)
   const handleFocus = (evt: FocusEvent) => {
@@ -56,7 +57,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     accessor.markAsBlurred()
     callEmit(props.onBlur, evt)
 
-    if (props.trim) {
+    if (mergedTrim.value) {
       setValue((evt.target as T).value.trim())
     }
   }

diff --git a/packages/components/textarea/docs/Api.zh.md b/packages/components/textarea/docs/Api.zh.md
@@ -20,6 +20,6 @@
 | `resize` | 缩放方向 | `none \| both \| horizontal \| vertical` | `vertical` | ✅ | 启用 `autoRows` 的时，仅 `none \| horizontal` 有效 |
 | `showCount` | 是否展示字符数 | `boolean` | `false` | ✅ | - |
 | `size` | 设置大小 | `'sm' \| 'md' \| 'lg'` | `'md'` | ✅ | - |
-| `trim` | 失去焦点后自动去除前后空格  | `boolean` | `false` | - | - |
+| `trim` | 失去焦点后自动去除前后空格  | `boolean` | `false` | ✅ | - |
 | `onChange` | 值发生改变后的回调 | `(value: string, oldValue: string) => void` | - | - | - |
 | `onClear` | 清除图标被点击后的回调 | `(evt: MouseEvent) => void` | - | - | - |