From bf6b61cd902eb6b1e520d281ddbee8678c2aa08b Mon Sep 17 00:00:00 2001 From: huaweidevcloud Date: Wed, 30 Aug 2023 17:13:47 +0800 Subject: [PATCH 1/2] refactor: autoComplete --- .../devui/auto-complete/__tests__/auto-complete.spec.ts | 2 +- packages/devui-vue/devui/auto-complete/src/auto-complete.tsx | 2 +- .../devui-vue/devui/auto-complete/src/components/dropdown.tsx | 2 +- .../auto-complete/src/composables/use-auto-complete-render.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) 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 index 2f8fd7a5a8..2cf0753e6b 100644 --- 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.tsx b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx index 9bc0ed305b..79ac8d0cf8 100644 --- a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx +++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx @@ -10,7 +10,7 @@ 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'; diff --git a/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx b/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx index 744af711ce..0e46a5b120 100644 --- 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 index d620845d16..ad3890090e 100644 --- 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 @@ -2,7 +2,7 @@ import { computed, ComputedRef, inject, watch } from 'vue'; import type { SetupContext, Ref } from 'vue'; import { FORM_ITEM_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, From 8f89629323672906321de6cea7249d5852572efe Mon Sep 17 00:00:00 2001 From: huaweidevcloud Date: Wed, 30 Aug 2023 17:46:00 +0800 Subject: [PATCH 2/2] refactor: autoComplete --- .../auto-complete/src/auto-complete-types.ts | 10 +++--- .../auto-complete/src/auto-complete.scss | 35 +++++++++++++++---- .../devui/auto-complete/src/auto-complete.tsx | 11 ++++-- .../composables/use-auto-complete-render.ts | 6 ++-- .../src/composables/use-input-handle.ts | 3 +- .../src/composables/use-lazy-handle.ts | 21 +++++------ 6 files changed, 56 insertions(+), 30 deletions(-) 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 index 9d92b730c7..cd0f0adfff 100644 --- 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) => 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; loadMore: () => void; - latestSource: Ref; + latestSource: Ref>; modelValue: Ref; hoverIndex: Ref; - valueParser: Ref; + valueParser: () => void; isDisabled: ComputedRef; }; export const DropdownPropsKey: InjectionKey = 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 index 983164e1b0..8bf3e3d511 100644 --- 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; + } + } + } +} \ No newline at end of file diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx index 79ac8d0cf8..73c8552382 100644 --- 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'; @@ -14,6 +14,7 @@ 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)' }}>
inputRef.value.focus() }) return () => { return (
): 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 index a21a840e03..75fa6da010 100644 --- 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, recentlyFocus: RecentlyFocus, - latestSource: Ref + latestSource: Ref> ): 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 index c6d3a0bfa5..c126337072 100644 --- 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; - 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 }; }