From 8afdb42b4b3e0cc78fa7f74bae06a7d3f7bb2178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com> Date: Thu, 11 Apr 2024 19:07:38 +0800 Subject: [PATCH] =?UTF-8?q?fix(EditorMd):=20=E8=A7=A3=E5=86=B3=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=B8=8A=E6=9C=89md=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0?= =?UTF-8?q?=E6=9F=90=E4=B8=AA=E4=BD=8D=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20(#1825)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/composables/use-data-grid.ts | 2 +- .../src/composables/use-editor-md.ts | 1 - .../components/form-control/form-control.tsx | 27 +------------- .../components/form-item/form-item-types.ts | 4 +++ .../src/components/form-item/use-form-item.ts | 6 ++-- .../modal/src/components/modal-icons.tsx | 35 ++++++++++--------- .../src/composables/use-search-class.ts | 3 +- .../devui/search/src/search-types.ts | 6 +++- .../devui-vue/devui/search/src/search.scss | 13 ++++++- .../devui-vue/devui/search/src/search.tsx | 1 + .../devui-vue/docs/components/search/index.md | 2 ++ packages/devui-vue/package.json | 2 +- 12 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts index 882bb7c559..6e45f84fba 100644 --- a/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts +++ b/packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts @@ -245,7 +245,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) { scrollRef.value?.addEventListener('scroll', onScroll); if (typeof window !== 'undefined' && scrollRef.value) { resizeObserver = new ResizeObserver(() => { - if (scrollRef.value) { + if (scrollRef.value && sliceColumns.value.length) { let distance = 0; initOriginColumnData(); distance = scrollRef.value!.scrollLeft; diff --git a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts index a8ca947dd7..72b8925632 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/use-editor-md.ts @@ -310,7 +310,6 @@ export function useEditorMd(props: EditorMdProps, ctx: SetupContext) { editorIns.setSize('auto', '100%'); refreshEditorCursor(); - editorIns.setCursor(editorIns.lineCount(), 0); ctx.emit('afterEditorInit', editorIns); editorIns.on('change', onChange); editorIns.on('scroll', onScroll); diff --git a/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx b/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx index 6bed3c571a..68d076dd80 100644 --- a/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx +++ b/packages/devui-vue/devui/form/src/components/form-control/form-control.tsx @@ -16,7 +16,6 @@ export default defineComponent({ const formControl = ref(); const popoverRef = ref(); const ns = useNamespace('form'); - const showPopoverClick = ref(true); const { controlClasses, controlContainerClasses, labelData } = useFormControl(props); const { feedbackStatus, showFeedback, showPopover, showMessage, errorMessage, popPosition } = useFormControlValidate(); @@ -30,36 +29,12 @@ export default defineComponent({ return undefined; }); - const onDocumentClick = (e: Event) => { - const composedPath = e.composedPath(); - if (composedPath.includes(popoverRef.value.triggerEl)) { - showPopoverClick.value = true; - } else { - showPopoverClick.value = false; - } - }; - - watch(showPopover, (val) => { - if (val) { - setTimeout(() => { - document.addEventListener('click', onDocumentClick); - }); - } else { - showPopoverClick.value = true; - document.removeEventListener('click', onDocumentClick); - } - }); - - onUnmounted(() => { - document.removeEventListener('click', onDocumentClick); - }); - return () => (
; diff --git a/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts b/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts index 75218258a2..69403c4424 100644 --- a/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts +++ b/packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts @@ -12,7 +12,7 @@ import { FormRuleItem, UseFormItemValidate, MessageType, - UseFormItemRule + UseFormItemRule, } from './form-item-types'; import { useNamespace } from '@devui/shared/utils'; @@ -141,7 +141,9 @@ export function useFormItemValidate(props: FormItemProps, _rules: ComputedRef { diff --git a/packages/devui-vue/devui/modal/src/components/modal-icons.tsx b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx index 0718310ba2..fbc30fd4f4 100644 --- a/packages/devui-vue/devui/modal/src/components/modal-icons.tsx +++ b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx @@ -1,19 +1,20 @@ export function CloseIcon(): JSX.Element { - return ( - - - - - - ); + return ( + + + + + + + + + ); } diff --git a/packages/devui-vue/devui/search/src/composables/use-search-class.ts b/packages/devui-vue/devui/search/src/composables/use-search-class.ts index e662e94dcb..4233b43f10 100644 --- a/packages/devui-vue/devui/search/src/composables/use-search-class.ts +++ b/packages/devui-vue/devui/search/src/composables/use-search-class.ts @@ -24,12 +24,13 @@ export const useSearchClass = (props: SearchProps, isFocus: Ref): UseSe [ns.m('focus')]: isFocus.value, [ns.m('disabled')]: props.disabled, [ns.m('no-border')]: props.noBorder, + [ns.m('glow-style')]: props.showGlowStyle, [ns.m(searchSize.value)]: !!searchSize.value, [ns.m(props.iconPosition)]: ICON_POSITION[props.iconPosition], })); return { rootClass, - searchSize + searchSize, }; }; diff --git a/packages/devui-vue/devui/search/src/search-types.ts b/packages/devui-vue/devui/search/src/search-types.ts index 75ca6e7b42..afa4a8236f 100644 --- a/packages/devui-vue/devui/search/src/search-types.ts +++ b/packages/devui-vue/devui/search/src/search-types.ts @@ -5,7 +5,7 @@ export type IconPosition = 'right' | 'left'; export const searchProps = { size: { - type: String as PropType + type: String as PropType, }, placeholder: { type: String, @@ -51,6 +51,10 @@ export const searchProps = { type: Function as PropType<(v: string) => void>, default: undefined, }, + showGlowStyle: { + type: Boolean, + default: true, + }, } as const; export type SearchProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/search/src/search.scss b/packages/devui-vue/devui/search/src/search.scss index 7467f35a89..ec6950ccdf 100644 --- a/packages/devui-vue/devui/search/src/search.scss +++ b/packages/devui-vue/devui/search/src/search.scss @@ -4,9 +4,11 @@ .#{$devui-prefix}-search { position: relative; + border-radius: $devui-border-radius; + transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in; @include flex; - &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):hover { + &:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):not(.#{$devui-prefix}-search--glow-style):hover { .#{$devui-prefix}-input { border-color: $devui-form-control-line-hover; } @@ -99,6 +101,15 @@ top: 0; } + &--glow-style { + &:not(.#{$devui-prefix}-search--disabled) { + &:hover, + &.#{$devui-prefix}-search--focus { + box-shadow: 0 0 0 4px $devui-form-control-interactive-outline; + } + } + } + &--sm { .#{$devui-prefix}-input { height: $devui-size-sm; diff --git a/packages/devui-vue/devui/search/src/search.tsx b/packages/devui-vue/devui/search/src/search.tsx index 3b6570ae86..e2ce9d259e 100644 --- a/packages/devui-vue/devui/search/src/search.tsx +++ b/packages/devui-vue/devui/search/src/search.tsx @@ -46,6 +46,7 @@ export default defineComponent({ maxlength: props.maxLength, modelValue: keywords.value, placeholder: props.placeholder || t('placeholder'), + showGlowStyle: false, onKeydown: onInputKeydown, 'onUpdate:modelValue': onInputUpdate, onFocus: onFocus, diff --git a/packages/devui-vue/docs/components/search/index.md b/packages/devui-vue/docs/components/search/index.md index 290bdd40ff..d2fa04a88e 100644 --- a/packages/devui-vue/docs/components/search/index.md +++ b/packages/devui-vue/docs/components/search/index.md @@ -107,6 +107,7 @@ export default defineComponent({ | icon-position | [IconPositionType](#iconpositiontype) | 'right' | 可选，搜索图标位置 | [搜索图标左置](#搜索图标左置) | | no-border | `boolean` | false | 可选，是否显示边框 | [无边框](#无边框) | | css-class | `string` | '' | 可选，支持传入类名到输入框上 | [双向绑定](#双向绑定) | +|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果|| ### Search 事件 @@ -123,6 +124,7 @@ type SearchSizeType = 'sm' | 'md' | 'lg'; ``` #### IconPositionType + ```ts type IconPositionType = 'right' | 'left'; ``` diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index baa7a95a07..7332cc4771 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.9", + "version": "1.6.10", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [