Skip to content

Commit 2096140

Browse files
xingyan95xingyan95
authored
修复组件问题 (#1826)
1 parent 8693589 commit 2096140

File tree

10 files changed

+50
-49
lines changed

10 files changed

+50
-49
lines changed

‎packages/devui-vue/devui/data-grid/src/composables/use-data-grid.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export function useDataGrid(props: DataGridProps, ctx: SetupContext) {
245245
scrollRef.value?.addEventListener('scroll', onScroll);
246246
if (typeof window !== 'undefined' && scrollRef.value) {
247247
resizeObserver = new ResizeObserver(() => {
248-
if (scrollRef.value) {
248+
if (scrollRef.value && sliceColumns.value.length) {
249249
let distance = 0;
250250
initOriginColumnData();
251251
distance = scrollRef.value!.scrollLeft;

‎packages/devui-vue/devui/form/src/components/form-control/form-control.tsx‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export default defineComponent({
1616
const formControl = ref();
1717
const popoverRef = ref();
1818
const ns = useNamespace('form');
19-
const showPopoverClick = ref(true);
2019
const { controlClasses, controlContainerClasses, labelData } = useFormControl(props);
2120
const { feedbackStatus, showFeedback, showPopover, showMessage, errorMessage, popPosition } = useFormControlValidate();
2221

@@ -30,36 +29,12 @@ export default defineComponent({
3029
return undefined;
3130
});
3231

33-
const onDocumentClick = (e: Event) => {
34-
const composedPath = e.composedPath();
35-
if (composedPath.includes(popoverRef.value.triggerEl)) {
36-
showPopoverClick.value = true;
37-
} else {
38-
showPopoverClick.value = false;
39-
}
40-
};
41-
42-
watch(showPopover, (val) => {
43-
if (val) {
44-
setTimeout(() => {
45-
document.addEventListener('click', onDocumentClick);
46-
});
47-
} else {
48-
showPopoverClick.value = true;
49-
document.removeEventListener('click', onDocumentClick);
50-
}
51-
});
52-
53-
onUnmounted(() => {
54-
document.removeEventListener('click', onDocumentClick);
55-
});
56-
5732
return () => (
5833
<div class={controlClasses.value} ref={formControl}>
5934
<div class={controlContainerClasses.value}>
6035
<Popover
6136
ref={popoverRef}
62-
is-open={showPopover.value && showPopoverClick.value}
37+
is-open={showPopover.value}
6338
trigger="manually"
6439
content={errorMessage.value}
6540
pop-type="error"

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ export const formItemProps = {
6666
type: String,
6767
default: '',
6868
},
69+
isAsyncValidate: {
70+
type: Boolean,
71+
default: false,
72+
},
6973
};
7074

7175
export type FormItemProps = ExtractPropTypes<typeof formItemProps>;

‎packages/devui-vue/devui/form/src/components/form-item/use-form-item.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
FormRuleItem,
1313
UseFormItemValidate,
1414
MessageType,
15-
UseFormItemRule
15+
UseFormItemRule,
1616
} from './form-item-types';
1717
import { useNamespace } from '@devui/shared/utils';
1818

@@ -141,7 +141,9 @@ export function useFormItemValidate(props: FormItemProps, _rules: ComputedRef<Fo
141141
return true;
142142
}
143143

144-
validateState.value = 'pending';
144+
if (props.isAsyncValidate) {
145+
validateState.value = 'pending';
146+
}
145147

146148
return execValidate(rules)
147149
.then(() => {

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

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
export function CloseIcon(): JSX.Element {
2-
return (
3-
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
4-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5-
<path
6-
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
7-
C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801
8-
13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881
9-
1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971
10-
L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865
11-
C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311
12-
C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z`}
13-
fill="#8A8E99"
14-
fill-rule="nonzero"
15-
></path>
16-
</g>
17-
</svg>
18-
);
2+
return (
3+
<svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
4+
<g id="modal-close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5+
<g transform="translate(3.000000, 3.000000)" fill="#71757F" fill-rule="nonzero" id="modal-close-road">
6+
<path
7+
d={`M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391
8+
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+
9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245
10+
-0.353553391,-0.353553391 Z`}></path>
11+
<path
12+
d={`M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039
13+
10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155
14+
-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
15+
L9.64644661,-0.353553391 Z`}></path>
16+
</g>
17+
</g>
18+
</svg>
19+
);
1920
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,13 @@ export const useSearchClass = (props: SearchProps, isFocus: Ref<boolean>): UseSe
2424
[ns.m('focus')]: isFocus.value,
2525
[ns.m('disabled')]: props.disabled,
2626
[ns.m('no-border')]: props.noBorder,
27+
[ns.m('glow-style')]: props.showGlowStyle,
2728
[ns.m(searchSize.value)]: !!searchSize.value,
2829
[ns.m(props.iconPosition)]: ICON_POSITION[props.iconPosition],
2930
}));
3031

3132
return {
3233
rootClass,
33-
searchSize
34+
searchSize,
3435
};
3536
};

‎packages/devui-vue/devui/search/src/search-types.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export type IconPosition = 'right' | 'left';
55

66
export const searchProps = {
77
size: {
8-
type: String as PropType<Size>
8+
type: String as PropType<Size>,
99
},
1010
placeholder: {
1111
type: String,
@@ -51,6 +51,10 @@ export const searchProps = {
5151
type: Function as PropType<(v: string) => void>,
5252
default: undefined,
5353
},
54+
showGlowStyle: {
55+
type: Boolean,
56+
default: true,
57+
},
5458
} as const;
5559

5660
export type SearchProps = ExtractPropTypes<typeof searchProps>;

‎packages/devui-vue/devui/search/src/search.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44

55
.#{$devui-prefix}-search {
66
position: relative;
7+
border-radius: $devui-border-radius;
8+
transition: border-color 0.3s $devui-animation-ease-in-out-smooth, box-shadow $devui-animation-duration-base $devui-animation-ease-in;
79
@include flex;
810

9-
&:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):hover {
11+
&:not(.#{$devui-prefix}-search--error):not(.#{$devui-prefix}-search--disabled):not(.#{$devui-prefix}-search--focus):not(.#{$devui-prefix}-search--glow-style):hover {
1012
.#{$devui-prefix}-input {
1113
border-color: $devui-form-control-line-hover;
1214
}
@@ -99,6 +101,15 @@
99101
top: 0;
100102
}
101103

104+
&--glow-style {
105+
&:not(.#{$devui-prefix}-search--disabled) {
106+
&:hover,
107+
&.#{$devui-prefix}-search--focus {
108+
box-shadow: 0 0 0 4px $devui-form-control-interactive-outline;
109+
}
110+
}
111+
}
112+
102113
&--sm {
103114
.#{$devui-prefix}-input {
104115
height: $devui-size-sm;

‎packages/devui-vue/devui/search/src/search.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default defineComponent({
4646
maxlength: props.maxLength,
4747
modelValue: keywords.value,
4848
placeholder: props.placeholder || t('placeholder'),
49+
showGlowStyle: false,
4950
onKeydown: onInputKeydown,
5051
'onUpdate:modelValue': onInputUpdate,
5152
onFocus: onFocus,

‎packages/devui-vue/docs/components/search/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export default defineComponent({
107107
| icon-position | [IconPositionType](#iconpositiontype) | 'right' | 可选，搜索图标位置 | [搜索图标左置](#搜索图标左置) |
108108
| no-border | `boolean` | false | 可选，是否显示边框 | [无边框](#无边框) |
109109
| css-class | `string` | '' | 可选，支持传入类名到输入框上 | [双向绑定](#双向绑定) |
110+
|show-glow-style|`boolean`|true|可选，是否显示悬浮发光效果||
110111

111112
### Search 事件
112113

@@ -123,6 +124,7 @@ type SearchSizeType = 'sm' | 'md' | 'lg';
123124
```
124125

125126
#### IconPositionType
127+
126128
```ts
127129
type IconPositionType = 'right' | 'left';
128130
```

0 commit comments

Comments
 (0)