feat(tag-input): add useInputKeydown

Author: vaebe

packages/devui-vue/devui/tag-input/src/composables/use-input-keydown.ts

@@ -0,0 +1,38 @@
+import { TagInputProps, HandleEnter, OnSelectIndexChange, UseInputKeydownReturnTypes } from '../tag-input-types';
+
+export const useInputKeydown = (
+ props: TagInputProps,
+ handleEnter: HandleEnter,
+ onSelectIndexChange: OnSelectIndexChange): UseInputKeydownReturnTypes => {
+
+ const KEYS_MAP = {
+ tab: 'Tab',
+ down: 'ArrowDown',
+ up: 'ArrowUp',
+ enter: 'Enter',
+ space: ' ',
+ } as const;
+
+ const onInputKeydown = ($event: KeyboardEvent) => {
+ switch ($event.key) {
+ case KEYS_MAP.tab:
+ case KEYS_MAP.enter:
+ case KEYS_MAP.space:
+ if (!props.isAddBySpace && KEYS_MAP.space) {
+ return;
+ }
+ handleEnter();
+ break;
+ case KEYS_MAP.down:
+ onSelectIndexChange(true);
+ break;
+ case KEYS_MAP.up:
+ onSelectIndexChange(false);
+ break;
+ default:
+ break;
+ }
+ };
+
+ return { onInputKeydown };
+};

packages/devui-vue/devui/tag-input/src/tag-input-types.ts

@@ -2,6 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
 
 export interface Suggestion {
  __index?: number;
+
  [x: string]: unknown;
 }
 
@@ -65,3 +66,10 @@ export const tagInputProps = {
 } as const;
 
 export type TagInputProps = ExtractPropTypes<typeof tagInputProps>;
+
+export type HandleEnter = () => void;
+export type OnSelectIndexChange = (isUp: boolean) => void;
+
+export interface UseInputKeydownReturnTypes {
+ onInputKeydown: (e: KeyboardEvent) => void;
+}

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

@@ -18,14 +18,7 @@ import { useNamespace } from '../../shared/hooks/use-namespace';
 import removeBtnSvg from './components/icon-remove';
 import { Suggestion, TagInputProps, tagInputProps } from './tag-input-types';
 import './tag-input.scss';
-
-const KEYS_MAP = {
- tab: 'Tab',
- down: 'ArrowDown',
- up: 'ArrowUp',
- enter: 'Enter',
- space: ' ',
-} as const;
+import { useInputKeydown } from './composables/use-input-keydown';
 
 export default defineComponent({
  name: 'DTagInput',
@@ -126,26 +119,7 @@ export default defineComponent({
  mergedSuggestions.value.length === 0 && (tagInputVal.value = '');
  };
 
- const onInputKeydown = ($event: KeyboardEvent) => {
- switch ($event.key) {
- case KEYS_MAP.tab:
- case KEYS_MAP.enter:
- case KEYS_MAP.space:
- if (!props.isAddBySpace && KEYS_MAP.space) {
- return;
- }
- handleEnter();
- break;
- case KEYS_MAP.down:
- onSelectIndexChange(true);
- break;
- case KEYS_MAP.up:
- onSelectIndexChange();
- break;
- default:
- break;
- }
- };
+ const { onInputKeydown } = useInputKeydown(props, handleEnter, onSelectIndexChange);
 
  const removeTag = ($event: Event, tagIdx: number) => {
  $event.preventDefault();