Merge branch 'dev' of github.com:DevCloudFE/vue-devui into dev

SWPUOpenSource · Apr 12, 2024 · 714c1a4 · 714c1a4
2 parents 11e34a6 + 2096140
commit 714c1a4
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 49 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
@@ -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/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 () => (
  <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"

diff --git a/packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts b/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>;

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
@@ -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(() => {

diff --git 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 (
- <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http:https://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:https://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>
+ );
 }
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
@@ -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,
  };
 };
diff --git 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<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>;

diff --git 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
@@ -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
@@ -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';
 ```