DevCloudFE · fengjiancai · Aug 30, 2023 · Aug 30, 2023
diff --git a/packages/devui-vue/devui/auto-complete/__tests__/auto-complete.spec.ts b/packages/devui-vue/devui/auto-complete/__tests__/auto-complete.spec.ts
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { nextTick, ref } from 'vue';
 import DAutoComplete from '../src/auto-complete';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { wait } from '../../shared/utils';
 
 jest.mock('../../locale/create', () => ({

diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts b/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts
@@ -80,7 +80,7 @@ export const autoCompleteProps = {
   },
   tipsText: {
     type: String,
-    default: '最近输入',
+    default: '',
   },
   latestSource: {
     type: Array,
@@ -120,7 +120,7 @@ export const autoCompleteProps = {
   },
   placeholder: {
     type: String,
-    default: 'Search',
+    default: '',
   },
   prefix: {
     type: String,
@@ -171,7 +171,7 @@ 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: Array<SourceItemObj>) => void;
+export type RecentlyFocus = (latestSource: SourceType) => void;
 export type InputDebounceCb = (value: string) => void;
 export type TransInputFocusEmit = () => unknown;
 export type SelectOptionClick = (item: string | SourceItemObj) => void;
@@ -189,10 +189,10 @@ export type DropdownProps = {
   dropDownRef: Ref;
   showLoading: Ref<boolean>;
   loadMore: () => void;
-  latestSource: Ref;
+  latestSource: Ref<Array<SourceItemObj>>;
   modelValue: Ref<string>;
   hoverIndex: Ref<number>;
-  valueParser: Ref;
+  valueParser: () => void;
   isDisabled: ComputedRef<boolean>;
 };
 export const DropdownPropsKey: InjectionKey<DropdownProps> = Symbol('DropdownPropsKey');
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
@@ -20,7 +20,14 @@
   .#{$devui-prefix}-form-control {
     padding: 4px 0;
     width: 100%;
+    color: $devui-text;
+    font-size: $devui-font-size;
+    outline: none;
     background-color: transparent;
+
+    &::placeholder {
+      color: $devui-placeholder;
+    }
   }
 }
 
@@ -64,8 +71,8 @@
 
       &.selected,
       &.selected &:hover {
-        color: $devui-list-item-active-text !important;
-        background-color: $devui-list-item-active-bg !important;
+        color: $devui-list-item-active-text  !important;
+        background-color: $devui-list-item-active-bg  !important;
       }
     }
   }
@@ -127,7 +134,7 @@
 
   &--md {
     height: $devui-size-md;
-    font-size: $devui-font-size-md;
+    font-size: $devui-font-size;
   }
 
   &--lg {
@@ -163,7 +170,7 @@
         border-color: $devui-form-control-line-hover;
       }
 
-      > input {
+      >input {
         border: none !important;
       }
 
@@ -219,6 +226,7 @@
     background-color: $devui-disabled-bg;
     border-color: $devui-disabled-line;
     cursor: not-allowed;
+
     .#{$devui-prefix}-dropdown-origin {
       cursor: not-allowed;
       background-color: transparent !important;
@@ -243,6 +251,7 @@
     display: inline-flex;
     width: 100%;
     align-items: stretch;
+
     .#{$devui-prefix}-auto-complete-input__prepend {
       border-right: 0;
       border-top-right-radius: 0;
@@ -265,15 +274,27 @@
     }
 
     .#{$devui-prefix}-auto-complete-input__prefix {
-      > * {
+      >* {
         margin-right: 8px;
       }
     }
 
     .#{$devui-prefix}-auto-complete-input__suffix {
-      > * {
+      >* {
         margin-left: 8px;
       }
     }
   }
-}
+
+  &--gray-style {
+    .#{$devui-prefix}-auto-complete-input__wrapper:not(.#{$devui-prefix}-auto-complete__wrapper--error) {
+      background: $devui-gray-5;
+      border-color: $devui-gray-5;
+
+      &:hover {
+        background-color: $devui-gray-10;
+        border-color: $devui-gray-10  !important;
+      }
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, provide, Transition, toRefs, ref, SetupContext, Teleport, computed, inject } from 'vue';
+import { defineComponent, provide, Transition, toRefs, ref, SetupContext, Teleport, computed, inject, getCurrentInstance } from 'vue';
 import { autoCompleteProps, AutoCompleteProps, DropdownPropsKey } from './auto-complete-types';
 import useCustomTemplate from './composables/use-custom-template';
 import useSearchFn from './composables/use-searchfn';
@@ -10,10 +10,11 @@ import { useAutoCompleteRender } from './composables/use-auto-complete-render';
 import DAutoCompleteDropdown from './components/dropdown';
 import ClickOutside from '../../shared/devui-directive/clickoutside';
 import { FlexibleOverlay } from '../../overlay/src/flexible-overlay';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import './auto-complete.scss';
 import { Icon } from '../../icon';
 import { FORM_TOKEN } from '../../form';
+import { createI18nTranslate } from '../../locale/create';
 
 export default defineComponent({
   name: 'DAutoComplete',
@@ -44,6 +45,8 @@ export default defineComponent({
     const inputNs = useNamespace('auto-complete-input');
     const isDisabled = computed(() => formContext?.disabled || disabled.value);
     const autoCompleteSize = computed(() => formContext?.size || props.size);
+    const app = getCurrentInstance()
+    const t = createI18nTranslate('DAutoComplete', app)
 
     const { handleSearch, searchList, showNoResultItemTemplate, recentlyFocus } = useSearchFn(
       ctx,
@@ -65,7 +68,7 @@ export default defineComponent({
       latestSource
     );
     const { selectedIndex, selectOptionClick } = useSelectHandle(ctx, searchList, selectValue, handleSearch, formatter, handleClose);
-    const { showLoading, dropDownRef, loadMore } = useLazyHandle(props, ctx, handleSearch);
+    const { showLoading, dropDownRef, loadMore, loadFinish } = useLazyHandle(props, ctx, handleSearch);
     const { customRenderSolts } = useCustomTemplate(ctx, modelValue);
     const { hoverIndex, handlekeyDown } = useKeyBoardHandle(
       dropDownRef,
@@ -117,6 +120,7 @@ export default defineComponent({
             origin={origin.value}
             position={position.value}
             v-model={visible.value}
+            auto-update-position
             style={{ zIndex: 'var(--devui-z-index-dropdown, 1052)' }}>
             <div
               class={ns.e('menu')}
@@ -139,6 +143,7 @@ export default defineComponent({
         return renderBasicDropdown();
       }
     };
+    ctx.expose({ loadFinish, focus: () => inputRef.value.focus() })
     return () => {
       return (
         <div
@@ -162,7 +167,7 @@ export default defineComponent({
                 type="text"
                 onClick={toggleMenu}
                 class={inputInnerClasses.value}
-                placeholder={placeholder.value}
+                placeholder={placeholder.value || t('placeholder')}
                 onInput={onInput}
                 onFocus={onFocus}
                 onBlur={onBlur}

diff --git a/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx b/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, getCurrentInstance, inject } from 'vue';
 import { DropdownProps, DropdownPropsKey, SourceItemObj } from '../auto-complete-types';
 import Loading from '../../../loading/src/loading-directive';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import { createI18nTranslate } from '../../../locale/create';
 export default defineComponent({
   name: 'DAutoCompleteDropdown',

diff --git a/packages/devui-vue/devui/auto-complete/src/composables/use-auto-complete-render.ts b/packages/devui-vue/devui/auto-complete/src/composables/use-auto-complete-render.ts
@@ -1,8 +1,8 @@
 import { computed, ComputedRef, inject, watch } from 'vue';
 import type { SetupContext, Ref } from 'vue';
-import { FORM_ITEM_TOKEN } from '../../../form';
+import { FORM_ITEM_TOKEN, STYLE_TOKEN } from '../../../form';
 import { AutoCompleteProps, UseAutoCompleteRender, AutoCompleteSize } from '../auto-complete-types';
-import { useNamespace } from '../../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 export function useAutoCompleteRender(
   props: AutoCompleteProps,
@@ -13,6 +13,7 @@ export function useAutoCompleteRender(
   autoCompleteSize: ComputedRef<AutoCompleteSize>
 ): UseAutoCompleteRender {
   const formItemContext = inject(FORM_ITEM_TOKEN, undefined);
+  const styleType = inject(STYLE_TOKEN, undefined)
   const ns = useNamespace('auto-complete');
   const inputNs = useNamespace('auto-complete-input');
   const slotNs = useNamespace('auto-complete-slot');
@@ -39,6 +40,7 @@ export function useAutoCompleteRender(
     [slotNs.b()]: slots.prepend || slots.append || props.prefix || props.suffix,
     [ns.m('append')]: slots.append,
     [ns.m('prepend')]: slots.prepend,
+    [ns.m('gray-style')]: styleType === 'gray',
   }));
 
   const inputWrapperClasses = computed(() => ({
@@ -60,7 +62,7 @@ export function useAutoCompleteRender(
   watch(
     () => props.modelValue,
     () => {
-      formItemContext?.validate('change').catch((err) => console.log(err));
+      formItemContext?.validate('change').catch(() => { });
     }
   );
 

diff --git a/packages/devui-vue/devui/auto-complete/src/composables/use-input-handle.ts b/packages/devui-vue/devui/auto-complete/src/composables/use-input-handle.ts
@@ -5,6 +5,7 @@ import {
   InputDebounceCb,
   TransInputFocusEmit,
   SourceType,
+  SourceItemObj,
   UseInputHandle,
 } from '../auto-complete-types';
 export default function useInputHandle(
@@ -17,7 +18,7 @@ export default function useInputHandle(
   handleSearch: HandleSearch,
   transInputFocusEmit: Ref<TransInputFocusEmit>,
   recentlyFocus: RecentlyFocus,
-  latestSource: Ref
+  latestSource: Ref<Array<SourceItemObj>>
 ): UseInputHandle {
   const visible = ref(false);
   const inputRef = ref();

diff --git a/packages/devui-vue/devui/auto-complete/src/composables/use-lazy-handle.ts b/packages/devui-vue/devui/auto-complete/src/composables/use-lazy-handle.ts
@@ -1,34 +1,31 @@
-import { Ref, ref,SetupContext } from 'vue';
-import { AutoCompleteProps,HandleSearch } from '../auto-complete-types';
+import { Ref, ref, SetupContext } from 'vue';
+import { AutoCompleteProps, HandleSearch } from '../auto-complete-types';
 
-export default function useLazyHandle(props: AutoCompleteProps,ctx: SetupContext,handleSearch: HandleSearch): {
-  showLoading: Ref<boolean>;
-  dropDownRef: Ref;
-  loadMore: () => void;
-} {
+export default function useLazyHandle(props: AutoCompleteProps, ctx: SetupContext, handleSearch: HandleSearch) {
   const showLoading = ref(false);
   const dropDownRef = ref();
   const loadMore = () => {
-    if(!props.enableLazyLoad && showLoading) {return;}
+    if (!props.enableLazyLoad && showLoading) { return; }
     const dropDownValue = dropDownRef.value;
     const height = dropDownValue.scrollHeight;
     const scrollTop = dropDownValue.clientHeight + dropDownValue.scrollTop;
 
-    if(scrollTop >= height && scrollTop >= props.maxHeight) {
+    if (scrollTop >= height && scrollTop >= props.maxHeight) {
       props.loadMore();
       showLoading.value = true;
     }
   };
 
-  async function loadFinish (){
-    await handleSearch(props.modelValue,props.enableLazyLoad);
+  async function loadFinish() {
+    await handleSearch(props.modelValue, props.enableLazyLoad);
     showLoading.value = false;
   }
-  ctx.expose({loadFinish});
+
   return {
     showLoading,
     dropDownRef,
     loadMore,
+    loadFinish
   };
 }