fix(auto-complete): 修复eslint和单元测试问题 (#394)

packages/devui-vue/devui/auto-complete/__tests__/auto-complete.spec.ts

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick, ref } from 'vue';
 import DAutoComplete from '../src/auto-complete';
-
 // delay api
 const wait = (delay = 300) =>
   new Promise(resolve => setTimeout(() => resolve(true), delay));
@@ -13,7 +12,7 @@ describe('auto-complete', () => {
         <d-auto-complete
           :source="source"
           v-model="value"
-          :dAutoCompleteWidth="450"
+          :width="450"
         />
       `,
       setup() {
@@ -71,7 +70,7 @@ describe('auto-complete', () => {
             :source="source"
             v-model="value"
             :disabled="isDisabled"
-          /> 
+          />
           <button @click="toggle">{{ isDisabled ? 'Enable AutoComplete' : 'Disable AutoComplete' }}</button>
         </div>
       `,
@@ -128,8 +127,8 @@ describe('auto-complete', () => {
           disabledKey="disabled"
           isSearching
           :formatter="formatter"
-        > 
-          <template #searchingTemplate="slotProps" >
+        >
+          <template #searching="slotProps" >
             <div id="devui-is-searching-template">
                 {{slotProps}}
             </div>
@@ -234,13 +233,13 @@ describe('auto-complete', () => {
         <d-auto-complete
           :source="source"
           v-model="value"
-        > 
-          <template #itemTemplate="slotProps" >
+        >
+          <template #item="slotProps" >
             <div>
               第{{slotProps.index}}项: {{slotProps.item}}
             </div>
           </template>
-          <template #noResultItemTemplate="slotProps" >
+          <template #nothing="slotProps" >
             <div id="noResultItemTemplate">
                 {{slotProps}}
             </div>
@@ -345,13 +344,16 @@ describe('auto-complete', () => {
     expect(selectValueCB).toHaveBeenCalledTimes(1);
   });
   it('allowEmptyValueSearch ', async () => {
+    const div = document.createElement('div');
+    div.id="app";
+    document.body.appendChild(div);
     const wrapper = mount({
       components: {'d-auto-complete': DAutoComplete },
       template: `
         <d-auto-complete
           :source="source"
           v-model="value"
-          :allowEmptyValueSearch="allowEmptyValueSearch"
+          :allow-empty-value-search="allowEmptyValueSearch"
         />
       `,
       setup() {
@@ -377,41 +379,38 @@ describe('auto-complete', () => {
     expect(input.element.value).toBe('');
     await input.trigger('focus');
     await nextTick();
+    await input.setValue('');
+    await wait(300);
+    await nextTick();
     expect(wrapper.find('ul').element.childElementCount).toBe(5);
   });
-
-  it('appendToBody & appendToBodyDirections', async () => {
+  it('appendToBody & position', async () => {
     const wrapper = mount({
       components: {'d-auto-complete': DAutoComplete },
       template: `
         <d-auto-complete
           :source="source"
           v-model="value"
-          :appendToBodyDirections="appendToBodyDirections"
-          :allowEmptyValueSearch="allowEmptyValueSearch"
+          :append-to-body="appendToBody"
+          :position="position"
         />
       `,
       setup() {
         const value = ref('');
-        const allowEmptyValueSearch = ref(true);
+        const appendToBody = ref(true);
         const source = [
           'CC#',
           'C',
           'C++',
           'CPython',
           'CoffeeScript',
         ];
-        const appendToBodyDirections =  ref({
-          originX: 'left',
-          originY: 'bottom',
-          overlayX: 'left',
-          overlayY: 'top',
-        });
+        const position =  ref(['bottom']);
         return {
           value,
           source,
-          allowEmptyValueSearch,
-          appendToBodyDirections
+          appendToBody,
+          position
         };
       }
     });
@@ -424,10 +423,20 @@ describe('auto-complete', () => {
     await nextTick();
     await wait(300);
     await nextTick();
-    expect(wrapper.find('ul').element.childElementCount).toBe(5);
-    expect(wrapper.find('.selected').element.innerHTML).toBe('CC#');
+    expect(wrapper.find('.devui-select-open').exists()).toBe(true);
+    const ul = document.querySelector('.devui-list-unstyled');
+    let lis = 0;
+    if(ul&&ul.getElementsByTagName('li')){
+      lis=ul.getElementsByTagName('li').length;
+    }
+    expect(lis).toBe(5);
+    const li_ed = document.querySelector('.selected');
+    let li_text = '';
+    if(li_ed&&li_ed.getElementsByTagName('li')){
+      li_text=li_ed.innerHTML;
+    }
+    expect(li_text).toBe('CC#');
   });
-
   it('latestSource',async () => {
     const wrapper = mount({
       components: {'d-auto-complete': DAutoComplete },
@@ -530,6 +539,7 @@ describe('auto-complete', () => {
     expect(wrapper.find('.devui-auto-complete').exists()).toBe(true);
     const input = wrapper.find('input');
     expect(input.element.value).toBe('');
+    await input.trigger('click');
     await input.setValue('c');
     await nextTick();
     expect(wrapper.find('.devui-dropdown-menu').exists()).toBe(true);

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

@@ -1,9 +1,7 @@
 import type { App } from 'vue';
 import AutoComplete from './src/auto-complete';
 
-AutoComplete.install = function(app: App): void {
-  app.component(AutoComplete.name, AutoComplete);
-};
+export * from './src/auto-complete-types';
 
 export { AutoComplete };
 
@@ -12,6 +10,6 @@ export default {
   category: '数据录入',
   status: '100%',
   install(app: App): void {
-    app.use(AutoComplete as any);
+    app.component(AutoComplete.name, AutoComplete);
   }
 };

packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts

@@ -1,6 +1,16 @@
 import type { PropType, ExtractPropTypes, InjectionKey, SetupContext, Ref } from 'vue';
-const defaultFormatter = (item: any) => (item ? item.label || item.toString() : '');
-const defaultValueParse = (item: any) => item;
+export interface SourceItemObj {
+  label: string;
+  disabled: boolean;
+  [propName: string]: unknown;
+}
+const defaultFormatter = (item: string | SourceItemObj) => {
+  if(typeof item === 'string'){
+    return item;
+  }
+  return item!==null ? item.label || item.toString() : '';
+};
+const defaultValueParse = (item: string | SourceItemObj) => item;
 export type Placement =
   | 'top'
   | 'right'
@@ -14,122 +24,132 @@ export type Placement =
   | 'bottom-end'
   | 'left-start'
   | 'left-end';
+
+
+export type SourceType = Array<string>| Array<SourceItemObj>;
+
 export const autoCompleteProps = {
   modelValue: {
     type: String,
-    default:''
+    default: ''
   },
-  source:{
-    type :Array,
-    default:null
+  source: {
+    type : Array as PropType<SourceType>,
+    default: null
   },
-  allowEmptyValueSearch:{
-    type:Boolean,
-    default:false
+  allowEmptyValueSearch: {
+    type: Boolean,
+    default: false
   },
-  position :{
+  appendToBody:{
+    type: Boolean,
+    default: false
+  },
+  position : {
     type: Array as PropType<Array<Placement>>,
     default: ['bottom-end'],
   },
-  disabled:{
-    type:Boolean,
-    default:false
+  disabled: {
+    type: Boolean,
+    default: false
   },
-  delay:{
-    type:Number,
-    default:300
+  delay: {
+    type: Number,
+    default: 300
   },
-  disabledKey:{
-    type:String,
-    default:null
+  disabledKey: {
+    type: String,
+    default: null
   },
   formatter: {
-    type:Function as PropType<(item: any) => string>,
-    default:defaultFormatter
+    type: Function as PropType<(item: string | SourceItemObj) => string>,
+    default: defaultFormatter
   },
   isSearching: {
-    type:Boolean,
-    default:false
+    type: Boolean,
+    default: false
   },
-  sceneType:{
-    type:String,
-    default:null
+  sceneType: {
+    type: String,
+    default: null
   },
-  searchFn:{
-    type:Function as PropType<(term: string) => Array<any>>,
-    default:null
+  searchFn: {
+    type: Function as PropType<(term: string) => SourceType>,
+    default: null
   },
-  tipsText:{
-    type:String,
+  tipsText: {
+    type: String,
     default:'最近输入'
   },
-  latestSource:{
-    type:Array,
-    default:null
+  latestSource: {
+    type: Array,
+    default: null
   },
-  valueParser:{
-    type:Function as PropType<(item: any) => any>,
-    default:defaultValueParse
+  valueParser: {
+    type: Function as PropType<(item: string | SourceItemObj) => string>,
+    default: defaultValueParse
   },
   enableLazyLoad: {
-    type:Boolean,
-    default:false
+    type: Boolean,
+    default: false
   },
-  width:{
+  width: {
     type: Number,
-    default:400
+    default: 400
   },
-  showAnimation:{
-    type:Boolean,
-    default:true
+  showAnimation: {
+    type: Boolean,
+    default: true
   },
-  maxHeight:{
-    type:Number,
-    default:300
+  maxHeight: {
+    type: Number,
+    default: 300
   },
-  transInputFocusEmit:{
-    type:Function as PropType<() => void>,
-    default:null
+  transInputFocusEmit: {
+    type: Function as PropType<() => void>,
+    default: null
   },
   selectValue:{
-    type:Function as PropType<(val: any) => any>,
-    default:null
+    type: Function as PropType<(val: string) => string>,
+    default: null
   },
-  loadMore:{
-    type:Function as PropType<() => void>,
-    default:null
+  loadMore: {
+    type: Function as PropType<() => void>,
+    default: null
   }
 } as const;
 
 export type AutoCompleteProps = ExtractPropTypes<typeof autoCompleteProps>;
 
 export interface AutoCompleteRootType {
-  ctx: SetupContext<any>;
+  ctx: SetupContext;
   props: AutoCompleteProps;
 }
-export type SearchFnType = (term: string) => Array<any>;
-export type FormatterType = (item: any) => string;
-export type DefaultFuncType = (arg?: any) => any;
-export type HandleSearch = (term?: string | string,enableLazyLoad?: boolean) => void;
-export type RecentlyFocus = (latestSource: Array<any>) => void;
-export type InputDebounceCb = (...rest: any) => Promise<void>;
-export type TransInputFocusEmit = (any?: any) => void;
-export type SelectOptionClick = (any?: any) => void;
+export type SearchFnType = (term: string) => SourceType;
+export type FormatterType = (item: string | SourceItemObj) => string;
+export type DefaultFuncType = () => void;
+export type HandleSearch = (term: string,enableLazyLoad?: boolean) => void;
+export type RecentlyFocus = (latestSource: SourceType) => void;
+export type InputDebounceCb = (value: string) => void;
+export type TransInputFocusEmit = () => unknown;
+export type SelectOptionClick = (item: string | SourceItemObj) => void;
+export type SelectValueType = (value: string) => unknown;
 // 弹出选择框参数
 export type DropdownProps = {
   props: AutoCompleteProps;
-  searchList: Ref<any[]>;
+  searchList: Ref<SourceType>;
   searchStatus?: Ref<boolean>;
   showNoResultItemTemplate: Ref<boolean>;
   term?: string;
   visible: Ref<boolean>;
   selectedIndex: Ref<number>;
-  selectOptionClick: HandleSearch;
-  dropDownRef: Ref<HTMLUListElement>;
+  selectOptionClick: SelectOptionClick;
+  dropDownRef: Ref;
   showLoading: Ref<boolean>;
-  loadMore: (arg?: any) => void;
-  latestSource: Ref<any[]>;
+  loadMore: () => void;
+  latestSource: Ref<Array<SourceItemObj>>;
   modelValue: Ref<string>;
   hoverIndex: Ref<number>;
+  valueParser: () => void;
 };
 export const DropdownPropsKey: InjectionKey<DropdownProps>=Symbol('DropdownPropsKey');