refactor(input): input (DevCloudFE#1682)

Co-authored-by: GreatZP <greatzp@greatzp.cn>

Author: fengjiancai

packages/devui-vue/devui/auto-focus/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import AutoFocus from './src/auto-focus-directive';
+
+export { AutoFocus };
+
+export default {
+ title: 'AutoFocus 自动聚焦',
+ category: '公共',
+ install(app: App): void {
+ app.directive('dAutoFocus', AutoFocus);
+ },
+};

packages/devui-vue/devui/auto-focus/src/auto-focus-directive.ts

@@ -0,0 +1,7 @@
+export default {
+ mounted: (el: HTMLElement, binding: Record<string, any>) => {
+ if (binding.value) {
+ el.focus();
+ }
+ },
+};

packages/devui-vue/devui/input/__tests__/input.spec.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { ref, nextTick, reactive } from 'vue';
 import DInput from '../src/input';
 import { Form, FormItem } from '../../form';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const ns = useNamespace('input');
 const dotNs = useNamespace('input', true);

packages/devui-vue/devui/input/src/composables/use-input-event.ts

@@ -1,10 +1,11 @@
-import { inject } from 'vue';
+import { inject, ref } from 'vue';
 import type { Ref, SetupContext } from 'vue';
 import { FORM_ITEM_TOKEN, FormItemContext } from '../../../form/src/components/form-item/form-item-types';
-import { InputProps, UseInputEvent } from '../input-types';
+import { InputProps } from '../input-types';
 
-export function useInputEvent(isFocus: Ref<boolean>, props: InputProps, ctx: SetupContext, focus: () => void): UseInputEvent {
+export function useInputEvent(isFocus: Ref<boolean>, props: InputProps, ctx: SetupContext, focus: () => void) {
  const formItemContext = inject(FORM_ITEM_TOKEN, undefined) as FormItemContext;
+ const isComposition = ref(false);
  const onFocus = (e: FocusEvent) => {
  isFocus.value = true;
  ctx.emit('focus', e);
@@ -20,6 +21,9 @@ export function useInputEvent(isFocus: Ref<boolean>, props: InputProps, ctx: Set
 
  const onInput = (e: Event) => {
  ctx.emit('input', (e.target as HTMLInputElement).value);
+ if (isComposition.value) {
+ return;
+ }
  ctx.emit('update:modelValue', (e.target as HTMLInputElement).value);
  };
 
@@ -37,5 +41,22 @@ export function useInputEvent(isFocus: Ref<boolean>, props: InputProps, ctx: Set
  focus();
  };
 
- return { onFocus, onBlur, onInput, onChange, onKeydown, onClear };
+ const onCompositionStart = () => {
+ isComposition.value = true;
+ };
+
+ const onCompositionUpdate = (e: CompositionEvent) => {
+ const text = (e.target as HTMLInputElement)?.value;
+ const lastCharacter = text[text.length - 1] || '';
+ isComposition.value = !/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(lastCharacter);
+ };
+
+ const onCompositionEnd = (e: CompositionEvent) => {
+ if (isComposition.value) {
+ isComposition.value = false;
+ onInput(e);
+ }
+ };
+
+ return { onFocus, onBlur, onInput, onChange, onKeydown, onClear, onCompositionStart, onCompositionUpdate, onCompositionEnd };
 }

packages/devui-vue/devui/input/src/composables/use-input-render.ts

@@ -1,8 +1,8 @@
 import { computed, inject, toRefs, ref } from 'vue';
 import type { SetupContext } from 'vue';
-import { FORM_TOKEN, FormContext, FORM_ITEM_TOKEN, FormItemContext } from '../../../form';
+import { FORM_TOKEN, FormContext, FORM_ITEM_TOKEN, FormItemContext, STYLE_TOKEN } from '../../../form';
 import { InputProps, UseInputRender } from '../input-types';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 export function useInputRender(props: InputProps, ctx: SetupContext): UseInputRender {
  const formContext = inject(FORM_TOKEN, undefined) as FormContext;
@@ -16,6 +16,8 @@ export function useInputRender(props: InputProps, ctx: SetupContext): UseInputRe
  const inputDisabled = computed(() => disabled.value || formContext?.disabled);
  const inputSize = computed(() => size?.value || formContext?.size || '');
 
+ const styleType = inject(STYLE_TOKEN, undefined);
+
  const { style, class: customClass, ...otherAttrs } = ctx.attrs;
  const customStyle = { style };
 
@@ -34,6 +36,7 @@ export function useInputRender(props: InputProps, ctx: SetupContext): UseInputRe
  [slotNs.b()]: slots.prepend || slots.append,
  [ns.m('append')]: slots.append,
  [ns.m('prepend')]: slots.prepend,
+ [ns.m('gray-style')]: styleType === 'gray',
  },
  customClass,
  ]);

packages/devui-vue/devui/input/src/input-types.tsx

@@ -42,6 +42,14 @@ export const inputProps = {
  type: String,
  default: '',
  },
+ title: {
+ type: String,
+ default: '',
+ },
+ autofocus: {
+ type: Boolean,
+ default: false,
+ },
 } as const;
 
 export type InputProps = ExtractPropTypes<typeof inputProps>;

packages/devui-vue/devui/input/src/input.scss

@@ -72,6 +72,10 @@
  background: none;
  outline: none;
  box-sizing: border-box;
+
+ &::placeholder {
+ color: $devui-placeholder;
+ }
  }
 
  &--prepend {
@@ -158,4 +162,33 @@
  &__password--icon {
  cursor: pointer;
  }
+
+ &--gray-style:not(.#{$devui-prefix}-input--disabled) {
+ .#{$devui-prefix}-input__wrapper:not(.#{$devui-prefix}-input--error) {
+ background: $devui-gray-5;
+ border-color: $devui-gray-5;
+
+ &:hover {
+ background: $devui-gray-10;
+ border-color: $devui-gray-10;
+ }
+ }
+ }
+}
+
+body[ui-theme='galaxy-theme'] {
+ .#{$devui-prefix}-input__inner:-webkit-autofill,
+ .#{$devui-prefix}-input__inner:-webkit-autofill:hover,
+ .#{$devui-prefix}-input__inner:-webkit-autofill:focus,
+ .#{$devui-prefix}-input__inner:-webkit-autofill:active {
+ -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+ box-shadow: 0 0 0 1000px transparent inset !important;
+ caret-color: white;
+ }
+
+ .#{$devui-prefix}-input__inner:-internal-autofill-previewed,
+ .#{$devui-prefix}-input__inner:-internal-autofill-selected {
+ -webkit-text-fill-color: $devui-text;
+ transition: background-color 99999s ease-out 0.5s;
+ }
 }

packages/devui-vue/devui/input/src/input.tsx

@@ -1,9 +1,10 @@
 import { defineComponent, watch, inject, toRefs, shallowRef, ref, computed, getCurrentInstance } from 'vue';
 import type { SetupContext } from 'vue';
 import Icon from '../../icon/src/icon';
+import { AutoFocus } from '../../auto-focus';
 import { inputProps, InputProps } from './input-types';
 import { FORM_ITEM_TOKEN, FormItemContext } from '../../form/src/components/form-item/form-item-types';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { useInputRender } from './composables/use-input-render';
 import { useInputEvent } from './composables/use-input-event';
 import { useInputFunction } from './composables/use-input-function';
@@ -12,6 +13,9 @@ import { createI18nTranslate } from '../../locale/create';
 
 export default defineComponent({
  name: 'DInput',
+ directives: {
+ dAutoFocus: AutoFocus,
+ },
  inheritAttrs: false,
  props: inputProps,
  emits: ['update:modelValue', 'focus', 'blur', 'input', 'change', 'keydown', 'clear'],
@@ -20,15 +24,16 @@ export default defineComponent({
  const t = createI18nTranslate('DInput', app);
 
  const formItemContext = inject(FORM_ITEM_TOKEN, undefined) as FormItemContext;
- const { modelValue } = toRefs(props);
+ const { modelValue, placeholder, title, autofocus } = toRefs(props);
  const ns = useNamespace('input');
  const slotNs = useNamespace('input-slot');
  const { inputDisabled, inputSize, isFocus, wrapClasses, inputClasses, customStyle, otherAttrs } = useInputRender(props, ctx);
 
  const input = shallowRef<HTMLInputElement>();
  const { select, focus, blur } = useInputFunction(input);
 
- const { onFocus, onBlur, onInput, onChange, onKeydown, onClear } = useInputEvent(isFocus, props, ctx, focus);
+ const { onFocus, onBlur, onInput, onChange, onKeydown, onClear, onCompositionStart, onCompositionUpdate, onCompositionEnd } =
+ useInputEvent(isFocus, props, ctx, focus);
 
  const passwordVisible = ref(false);
  const clickPasswordIcon = () => {
@@ -67,17 +72,22 @@ export default defineComponent({
  )}
  <input
  ref={input}
+ v-dAutoFocus={autofocus.value}
  value={modelValue.value}
  disabled={inputDisabled.value}
  class={ns.e('inner')}
- placeholder={props.placeholder || t('placeholder')}
+ placeholder={placeholder.value ?? t('placeholder')}
  {...otherAttrs}
+ title={title.value}
  type={props.showPassword ? (passwordVisible.value ? 'text' : 'password') : 'text'}
  onInput={onInput}
  onFocus={onFocus}
  onBlur={onBlur}
  onChange={onChange}
  onKeydown={onKeydown}
+ onCompositionstart={onCompositionStart}
+ onCompositionupdate={onCompositionUpdate}
+ onCompositionend={onCompositionEnd}
  />
  {suffixVisible && (
  <span class={slotNs.e('suffix')}>
@@ -92,7 +102,7 @@ export default defineComponent({
  />
  )}
  {showClearable.value && (
- <Icon size={inputSize.value} class={ns.em('clear', 'icon')} name="close" onClick={onClear} />
+ <Icon size={inputSize.value} class={ns.em('clear', 'icon')} name="error-o" color="#adb0b8" onClick={onClear} />
  )}
  </span>
  )}

packages/devui-vue/docs/components/input/index.md

@@ -320,13 +320,19 @@ export default defineComponent({
 | 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
 | :------------- | :---------------------- | :----- | :----------------------------------------------- | :-------------------------------- |
 | v-model | `string` | '' | 绑定值 | [基本用法](#基本用法) |
+| placeholder | `string` | '' | 输入框占位文本 | [基本用法](#基本用法) |
 | disabled | `boolean` | false | 可选，文本框是否被禁用 | [基本用法](#基本用法) |
 | error | `boolean` | false | 可选，文本框是否出现输入错误 | [基本用法](#基本用法) |
 | size | [InputSize](#inputsize) | 'md' | 可选，文本框尺寸，有三种选择`'lg'`,`'md'`,`'sm'` | [尺寸](#尺寸) |
 | validate-event | `boolean` | true | 可选，输入时是否触发表单的校验 | |
 | prefix | `string` | - | 可选，自定义前缀图标 | [带图标的输入框](#带图标的输入框) |
 | suffix | `string` | - | 可选，自定义后缀图标 | [带图标的输入框](#带图标的输入框) |
+| show-password | `boolean` | false | 可选，是否显示为密码框 | |
 | clearable | `boolean` | false | 可选，是否可清空 | [一键清空](#一键清空) |
+| name | `string` | '' | 等价于原生 input name 属性 | |
+| readonly | `boolean` | false | 原生 readonly 属性，是否只读 | |
+| autocomplete | `string` | 'off' | 原生 autocomplete 属性 | |
+| autofocus | `boolean` | false | 自动获取焦点 | |
 
 ### Input 插槽