|
|
@@ -0,0 +1,79 @@
|
|
|
+import { defineComponent, h, mergeProps } from 'vue'
|
|
|
+import { Input, Textarea, AutoComplete } from '@arco-design/web-vue'
|
|
|
+
|
|
|
+function shouldTrim(props, noTrim) {
|
|
|
+ if (noTrim) return false
|
|
|
+ if (props.type === 'password') return false
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
+export function withInputTrim(Original) {
|
|
|
+ const originalEmits =
|
|
|
+ typeof Original.emits === 'object' && Original.emits !== null
|
|
|
+ ? Object.keys(Original.emits)
|
|
|
+ : ['update:modelValue', 'input', 'change', 'pressEnter', 'clear', 'focus', 'blur']
|
|
|
+
|
|
|
+ return defineComponent({
|
|
|
+ name: `Trim${Original.name || 'Input'}`,
|
|
|
+ inheritAttrs: false,
|
|
|
+ props: {
|
|
|
+ ...(Original.props || {}),
|
|
|
+ noTrim: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emits: [...new Set([...originalEmits, 'update:modelValue'])],
|
|
|
+ setup(props, { attrs, slots, emit }) {
|
|
|
+ return () => {
|
|
|
+ const { noTrim, modelValue, ...rest } = props
|
|
|
+
|
|
|
+ const onUpdateModelValue = (value) => {
|
|
|
+ emit('update:modelValue', value)
|
|
|
+ }
|
|
|
+
|
|
|
+ const onBlur = (ev) => {
|
|
|
+ if (shouldTrim(props, noTrim) && typeof modelValue === 'string') {
|
|
|
+ const trimmed = modelValue.trim()
|
|
|
+ if (trimmed !== modelValue) {
|
|
|
+ emit('update:modelValue', trimmed)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ emit('blur', ev)
|
|
|
+ const attrBlur = attrs.onBlur
|
|
|
+ if (attrBlur) {
|
|
|
+ const handlers = Array.isArray(attrBlur) ? attrBlur : [attrBlur]
|
|
|
+ handlers.forEach((fn) => typeof fn === 'function' && fn(ev))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return h(
|
|
|
+ Original,
|
|
|
+ mergeProps(attrs, rest, {
|
|
|
+ modelValue,
|
|
|
+ 'onUpdate:modelValue': onUpdateModelValue,
|
|
|
+ onBlur,
|
|
|
+ }),
|
|
|
+ slots
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const TRIM_COMPONENTS = [
|
|
|
+ ['AInput', Input],
|
|
|
+ ['AInputSearch', Input.Search],
|
|
|
+ ['ATextarea', Textarea],
|
|
|
+ ['AAutoComplete', AutoComplete],
|
|
|
+]
|
|
|
+
|
|
|
+export default {
|
|
|
+ install(app) {
|
|
|
+ TRIM_COMPONENTS.forEach(([name, component]) => {
|
|
|
+ if (component) {
|
|
|
+ app.component(name, withInputTrim(component))
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+}
|