Skip to content

Commit fccccc2

Browse files
xingyan95xingyan95
authored
fix: 修复组件问题 (DevCloudFE#1828)
1 parent 2096140 commit fccccc2

File tree

11 files changed

+170
-105
lines changed

11 files changed

+170
-105
lines changed

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

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -12,51 +12,53 @@ import { useCategorySearch } from './composables/use-category-search';
1212
import './category-search.scss';
1313

1414
export default defineComponent({
15-
name: 'DCategorySearch',
16-
props: categorySearchProps,
17-
emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
18-
setup(props: CategorySearchProps, ctx: SetupContext) {
19-
const {
20-
rootRef,
21-
scrollBarRef,
22-
inputRef,
23-
isHover,
24-
containerClasses,
25-
innerSelectedTags,
26-
joinLabelTypes,
27-
showExtendedConfig,
28-
operationConfig,
29-
onSearch,
30-
} = useCategorySearch(props, ctx);
15+
name: 'DCategorySearch',
16+
props: categorySearchProps,
17+
emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
18+
setup(props: CategorySearchProps, ctx: SetupContext) {
19+
const {
20+
rootRef,
21+
scrollBarRef,
22+
inputRef,
23+
isHover,
24+
containerClasses,
25+
innerSelectedTags,
26+
joinLabelTypes,
27+
showExtendedConfig,
28+
operationConfig,
29+
onSearch,
30+
} = useCategorySearch(props, ctx);
3131

32-
return () => (
33-
<div
34-
ref={rootRef}
35-
class={containerClasses.value}
36-
onMouseenter={() => (isHover.value = true)}
37-
onMouseleave={() => (isHover.value = false)}>
38-
<div class="dp-category-search-icon" onClick={onSearch}>
39-
<SearchIcon />
40-
</div>
41-
<div ref={scrollBarRef} class="dp-category-search-line-container">
42-
<ul class="dp-category-search-line">
43-
{innerSelectedTags.value.map((item) => (
44-
<CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
45-
))}
46-
<CategorySearchInput ref={inputRef} />
47-
</ul>
48-
</div>
49-
{showExtendedConfig.value && (
50-
<div class="dp-category-search-extended-container">
51-
{operationConfig.clear?.show && (
52-
<>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
53-
)}
54-
{operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
55-
{operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
56-
{ctx.slots.operation?.()}
57-
</div>
58-
)}
59-
</div>
60-
);
61-
},
32+
return () => (
33+
<div
34+
ref={rootRef}
35+
class={containerClasses.value}
36+
onMouseenter={() => (isHover.value = true)}
37+
onMouseleave={() => (isHover.value = false)}>
38+
{ctx.slots.searchIcon?.() ?? (
39+
<div class="dp-category-search-icon" onClick={onSearch}>
40+
<SearchIcon />
41+
</div>
42+
)}
43+
<div ref={scrollBarRef} class="dp-category-search-line-container">
44+
<ul class="dp-category-search-line">
45+
{innerSelectedTags.value.map((item) => (
46+
<CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
47+
))}
48+
<CategorySearchInput ref={inputRef} />
49+
</ul>
50+
</div>
51+
{showExtendedConfig.value && (
52+
<div class="dp-category-search-extended-container">
53+
{operationConfig.clear?.show && (
54+
<>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
55+
)}
56+
{operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
57+
{operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
58+
{ctx.slots.operation?.()}
59+
</div>
60+
)}
61+
</div>
62+
);
63+
},
6264
});

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const commonProps = {
3737
},
3838
size: {
3939
type: String as PropType<Size>,
40-
default: 'md',
4140
},
4241
showGlowStyle: {
4342
type: Boolean,

‎packages/devui-vue/devui/checkbox/src/use-checkbox.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export function useCheckboxGroup(props: CheckboxGroupProps, ctx: SetupContext):
143143
);
144144

145145
// 组件 size 优先于表单 size
146-
const checkboxGroupSize = computed(() => props.size || formContext?.size || '');
146+
const checkboxGroupSize = computed(() => props.size || formContext?.size || 'md');
147147

148148
provide(checkboxGroupInjectionKey, {
149149
disabled: toRef(props, 'disabled'),

‎packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default defineComponent({
1919
setup(props: RangeDatePickerProProps, ctx: SetupContext) {
2020
const app = getCurrentInstance();
2121
const t = createI18nTranslate('DDatePickerPro', app);
22-
const { showGlowStyle } = toRefs(props);
22+
const { showGlowStyle, position } = toRefs(props);
2323

2424
const ns = useNamespace('range-date-picker-pro');
2525
const {
@@ -44,7 +44,6 @@ export default defineComponent({
4444
handlerClearTime,
4545
onChangeRangeFocusType,
4646
} = useRangePickerPro(props, ctx);
47-
const position = ref(['bottom-start', 'top-start']);
4847
const currentPosition = ref('bottom');
4948
const handlePositionChange = (pos: string) => {
5049
currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -53,6 +52,15 @@ export default defineComponent({
5352
transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
5453
'z-index': 'var(--devui-z-index-dropdown, 1052)',
5554
}));
55+
const align = computed(() => {
56+
if (position.value.some((item: string) => item.includes('start'))) {
57+
return 'start';
58+
}
59+
if (position.value.some((item: string) => item.includes('end'))) {
60+
return 'end';
61+
}
62+
return undefined;
63+
});
5664

5765
return () => {
5866
const vSlots = {
@@ -141,7 +149,7 @@ export default defineComponent({
141149
v-model={isPanelShow.value}
142150
ref={overlayRef}
143151
origin={originRef.value}
144-
align="start"
152+
align={align.value}
145153
position={position.value}
146154
style={styles.value}
147155
onPositionChange={handlePositionChange}>

‎packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,20 @@ import type { Dayjs } from 'dayjs';
33
import { ArrType } from '../../time-picker/src/types';
44
import type { InputSize } from '../../input/src/input-types';
55

6+
export type Placement =
7+
| 'top'
8+
| 'right'
9+
| 'bottom'
10+
| 'left'
11+
| 'top-start'
12+
| 'top-end'
13+
| 'right-start'
14+
| 'right-end'
15+
| 'bottom-start'
16+
| 'bottom-end'
17+
| 'left-start'
18+
| 'left-end';
19+
620
export const datePickerProCommonProps = {
721
format: {
822
type: String,
@@ -34,6 +48,10 @@ export const datePickerProCommonProps = {
3448
type: Boolean,
3549
default: true,
3650
},
51+
position: {
52+
type: Array as PropType<Placement[]>,
53+
default: () => ['bottom-start', 'top-start'],
54+
},
3755
};
3856

3957
export const datePickerProProps = {

‎packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { SetupContext } from 'vue';
33
import { datePickerProProps, DatePickerProProps } from './date-picker-pro-types';
44
import usePickerPro from './use-picker-pro';
55
import { Input } from '../../input';
6-
import { FlexibleOverlay, Placement } from '../../overlay';
6+
import { FlexibleOverlay } from '../../overlay';
77
import DatePickerProPanel from './components/date-picker-panel';
88
import { IconCalendar } from './components/icon-calendar';
99
import { IconClose } from './components/icon-close';
@@ -18,7 +18,7 @@ export default defineComponent({
1818
setup(props: DatePickerProProps, ctx: SetupContext) {
1919
const app = getCurrentInstance();
2020
const t = createI18nTranslate('DDatePickerPro', app);
21-
const { showGlowStyle } = toRefs(props);
21+
const { showGlowStyle, position } = toRefs(props);
2222

2323
const ns = useNamespace('date-picker-pro');
2424
const {
@@ -39,7 +39,6 @@ export default defineComponent({
3939
onSelectedDate,
4040
handlerClearTime,
4141
} = usePickerPro(props, ctx, t);
42-
const position = ref<Placement[]>(['bottom-start', 'top-start']);
4342
const currentPosition = ref('bottom');
4443
const handlePositionChange = (pos: string) => {
4544
currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -48,6 +47,15 @@ export default defineComponent({
4847
transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
4948
'z-index': 'var(--devui-z-index-dropdown, 1052)',
5049
}));
50+
const align = computed(() => {
51+
if (position.value.some((item: string) => item.includes('start'))) {
52+
return 'start';
53+
}
54+
if (position.value.some((item: string) => item.includes('end'))) {
55+
return 'end';
56+
}
57+
return undefined;
58+
});
5159

5260
return () => {
5361
const vSlots = {
@@ -90,7 +98,7 @@ export default defineComponent({
9098
v-model={isPanelShow.value}
9199
ref={overlayRef}
92100
origin={originRef.value}
93-
align="start"
101+
align={align.value}
94102
position={position.value}
95103
style={styles.value}
96104
onPositionChange={handlePositionChange}>

‎packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
11
import { randomId } from '../../../../shared/utils/random-id';
22
import type { ComponentInternalInstance, Ref } from 'vue';
3-
import {
4-
defineComponent,
5-
getCurrentInstance,
6-
inject,
7-
onMounted,
8-
ref,
9-
watch,
10-
watchEffect
11-
} from 'vue';
3+
import { defineComponent, getCurrentInstance, inject, onMounted, ref, watch, watchEffect } from 'vue';
124
import { useNamespace } from '../../../../shared/hooks/use-namespace';
135
import { useClick } from '../../composables/use-click';
146
import { addLayer, clearSelect, getLayer, pushElement } from '../../composables/use-layer-operate';
157
import { useNearestMenuElement } from '../../composables/use-nearest-menu-element';
168
import MenuTransition from '../menu-transition/menu-transition';
179
import { SubMenuProps, subMenuProps } from './sub-menu-types';
1810
import { useShowSubMenu } from './use-sub-menu';
11+
import { SelectArrowIcon } from '../../../../svg-icons';
1912

2013
const ns = useNamespace('menu');
2114
const subNs = useNamespace('submenu');
@@ -31,7 +24,7 @@ export default defineComponent({
3124
setup(props: SubMenuProps, ctx) {
3225
const isShow = ref(true);
3326
const {
34-
vnode: { key }
27+
vnode: { key },
3528
} = getCurrentInstance() as ComponentInternalInstance;
3629
let key_ = String(key);
3730
const defaultOpenKeys = inject('openKeys') as Ref<string[]>;
@@ -63,7 +56,7 @@ export default defineComponent({
6356
if (idx >= 0 && cur.tagName === 'UL') {
6457
defaultOpenKeys.value.splice(idx, 1);
6558
} else {
66-
if (cur.tagName === 'UL'){
59+
if (cur.tagName === 'UL') {
6760
defaultOpenKeys.value.push(key_);
6861
}
6962
}
@@ -72,7 +65,7 @@ export default defineComponent({
7265
type: 'submenu-change',
7366
state: isOpen.value,
7467
key: key_,
75-
el: ele
68+
el: ele,
7669
});
7770
}
7871
};
@@ -93,12 +86,13 @@ export default defineComponent({
9386
watch(
9487
() => defaultOpenKeys,
9588
(n) => {
96-
if (n.value.includes(key_)){
89+
if (n.value.includes(key_)) {
9790
isOpen.value = true;
9891
} else {
9992
isOpen.value = false;
10093
}
101-
},{deep: true}
94+
},
95+
{ deep: true }
10296
);
10397
onMounted(() => {
10498
const subMenuTitle = title.value as unknown as HTMLElement;
@@ -142,18 +136,19 @@ export default defineComponent({
142136
onClick={clickHandle}
143137
class={[subMenuClass, class_layer.value, props['disabled'] && `${subMenuClass}-disabled`]}
144138
ref={subMenu}>
145-
<div
146-
class={[`${subMenuClass}-title`]}
147-
style={`padding: 0 ${indent}px`}
148-
ref={title}>
139+
<div class={[`${subMenuClass}-title`]} style={`padding: 0 ${indent}px`} ref={title}>
149140
<span class={`${ns.b()}-icon`}>{ctx.slots?.icon?.()}</span>
150141
<span v-show={!isCollapsed.value} class={`${subMenuClass}-title-content`}>
151142
{props.title}
152143
</span>
144+
<SelectArrowIcon
145+
v-show={!isCollapsed.value && key !== 'overflowContainer' && class_layer.value !== `layer_${subMenuClass}`}
146+
class={[ns.e('arrow-icon'), { 'is-opened': isOpen.value }]}
147+
/>
153148
<i
154149
v-show={!isCollapsed.value && key !== 'overflowContainer'}
155150
class={{
156-
'icon icon-chevron-up': class_layer.value !== `layer_${subMenuClass}`,
151+
'icon icon-chevron-up': false,
157152
'icon icon-chevron-right': class_layer.value === `layer_${subMenuClass}`,
158153
'is-opened': isOpen.value,
159154
}}></i>
@@ -162,8 +157,7 @@ export default defineComponent({
162157
<div
163158
class={`${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`}
164159
ref={wrapper}
165-
v-show={!props.disabled}
166-
>
160+
v-show={!props.disabled}>
167161
{ctx.slots.default?.()}
168162
</div>
169163
) : (

‎packages/devui-vue/devui/menu/src/styles/vertical.scss‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
}
77
.#{$devui-prefix}-menu-vertical {
88
padding: 0;
9-
transition:
10-
width $devui-animation-duration-slow $devui-animation-ease-in-smooth,
9+
transition: width $devui-animation-duration-slow $devui-animation-ease-in-smooth,
1110
padding $devui-animation-duration-slow $devui-animation-ease-in-smooth;
1211
border-right: $devui-line 1px solid;
1312

@@ -48,6 +47,7 @@
4847

4948
.#{$devui-prefix}-menu-item-vertical-wrapper {
5049
padding-left: 0 !important;
50+
margin: 4px 0 !important;
5151
}
5252

5353
.#{$devui-prefix}-menu-item {
@@ -108,7 +108,6 @@
108108
cursor: pointer;
109109
width: 100%;
110110
height: 40px;
111-
margin: 4px 0;
112111
line-height: 40px;
113112
padding-left: 18px;
114113
align-items: center;
@@ -227,4 +226,18 @@
227226
.#{$devui-prefix}-submenu-disabled::after {
228227
content: unset;
229228
}
229+
230+
.#{$devui-prefix}-menu__arrow-icon {
231+
width: 16px;
232+
height: 16px;
233+
transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
234+
235+
path {
236+
fill: $devui-text-weak;
237+
}
238+
239+
&.is-opened {
240+
transform: rotate(180deg);
241+
}
242+
}
230243
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,7 @@ export default defineComponent({
391391
| save | 自定义保存图标 | | |
392392
| more | 自定义更多图标 | | |
393393
| operation | 自定义除`clear`、`save`、`more`外的其他图标 | | [自定义扩展按钮](#自定义扩展按钮) |
394+
| searchIcon | 自定义搜索图标 | | |
394395

395396
### CategorySearch 方法
396397

0 commit comments

Comments
 (0)