修复组件问题 (#1826)

Author: xingyan95

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;

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 () => (
       <div class={controlClasses.value} ref={formControl}>
         <div class={controlContainerClasses.value}>
           <Popover
             ref={popoverRef}
-            is-open={showPopover.value && showPopoverClick.value}
+            is-open={showPopover.value}
             trigger="manually"
             content={errorMessage.value}
             pop-type="error"

packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts

@@ -66,6 +66,10 @@ export const formItemProps = {
     type: String,
     default: '',
   },
+  isAsyncValidate: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type FormItemProps = ExtractPropTypes<typeof formItemProps>;

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<Fo
       return true;
     }
 
-    validateState.value = 'pending';
+    if (props.isAsyncValidate) {
+      validateState.value = 'pending';
+    }
 
     return execValidate(rules)
       .then(() => {

packages/devui-vue/devui/modal/src/components/modal-icons.tsx

@@ -1,19 +1,20 @@
 export function CloseIcon(): JSX.Element {
-	return (
-		<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-			<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-				<path
-					d={`M14.6887175,1.25368865 C15.0770801,1.64205125 15.0121881,2.34244569 14.544513,2.81012074 L9.383,7.971 L14.544513,13.1322854 
-					C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801 
-					13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881 
-					1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971 
-					L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865 
-					C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311 
-					C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z`}
-					fill="#8A8E99"
-					fill-rule="nonzero"
-				></path>
-			</g>
-		</svg>
-	);
+  return (
+    <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <g id="modal-close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(3.000000, 3.000000)" fill="#71757F" fill-rule="nonzero" id="modal-close-road">
+          <path
+            d={`M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 
+						L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049 
+						9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245 
+						-0.353553391,-0.353553391 Z`}></path>
+          <path
+            d={`M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039 
+						10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155 
+						-0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661 
+						L9.64644661,-0.353553391 Z`}></path>
+        </g>
+      </g>
+    </svg>
+  );
 }

packages/devui-vue/devui/search/src/composables/use-search-class.ts

@@ -24,12 +24,13 @@ export const useSearchClass = (props: SearchProps, isFocus: Ref<boolean>): 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,
   };
 };

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<Size>
+    type: String as PropType<Size>,
   },
   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<typeof searchProps>;

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;

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,

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';
 ```