Skip to content

Commit f522d0d

Browse files
xingyan95xingyan95
authored
refactor(Overlay): 重构flexible-overlay (DevCloudFE#238)
* refactor(badge): 位置和偏移量参数重命名 * refactor(Overlay): 重构flexible-overlay
1 parent f72a531 commit f522d0d

File tree

15 files changed

+440
-656
lines changed

15 files changed

+440
-656
lines changed

Diff for: ‎packages/devui-vue/devui-cli/commands/build.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const baseConfig = defineConfig({
1616
});
1717

1818
const rollupOptions = {
19-
external: ['vue', 'vue-router', '@vueuse/core'],
19+
external: ['vue', 'vue-router', '@vueuse/core', '@floating-ui/dom'],
2020
output: {
2121
globals: {
2222
vue: 'Vue',

Diff for: ‎packages/devui-vue/devui/badge/index.ts

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1-
import type { App } from 'vue'
2-
import Badge from './src/badge'
1+
import type { App } from 'vue';
2+
import Badge from './src/badge';
3+
export * from './src/badge-types';
34

4-
Badge.install = function (app: App) {
5-
app.component(Badge.name, Badge)
6-
}
7-
8-
export { Badge }
5+
export { Badge };
96

107
export default {
118
title: 'Badge 徽标',
129
category: '数据展示',
1310
status: '100%',
1411
install(app: App): void {
15-
app.use(Badge as any)
16-
}
17-
}
12+
app.component(Badge.name, Badge);
13+
},
14+
};

Diff for: ‎packages/devui-vue/devui/badge/src/badge-types.ts

+20-20
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
import type { PropType, ExtractPropTypes } from 'vue'
1+
import type { PropType, ExtractPropTypes } from 'vue';
22

3-
type BadgeStatusType = PropType<'danger' | 'warning' | 'waiting' | 'success' | 'info'>
4-
type BadgePositionType = PropType<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>
3+
export type BadgeStatusType = 'danger' | 'warning' | 'waiting' | 'success' | 'info';
4+
export type BadgePositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
55

6-
const badgeStatusType = ['danger', 'warning', 'waiting', 'success', 'info']
7-
const badgePositionType = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
6+
const badgeStatusType = ['danger', 'warning', 'waiting', 'success', 'info'];
7+
const badgePositionType = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
88

99
export const badgeProps = {
1010
count: {
11-
type: [Number, String]
11+
type: [Number, String],
1212
},
1313
maxCount: {
1414
type: Number,
15-
default: 99
15+
default: 99,
1616
},
1717
showDot: {
1818
type: Boolean,
19-
default: false
19+
default: false,
2020
},
2121
status: {
22-
type: String as BadgeStatusType,
23-
validator: (val: string) => badgeStatusType.includes(val)
22+
type: String as PropType<BadgeStatusType>,
23+
validator: (val: string): boolean => badgeStatusType.includes(val),
2424
},
25-
badgePos: {
26-
type: String as BadgePositionType,
25+
position: {
26+
type: String as PropType<BadgePositionType>,
2727
default: 'top-right',
28-
validator: (val: string) => badgePositionType.includes(val)
28+
validator: (val: string): boolean => badgePositionType.includes(val),
2929
},
30-
offsetXY: {
31-
type: Array
30+
offset: {
31+
type: Array as PropType<Array<number>>,
3232
},
3333
bgColor: {
34-
type: String
34+
type: String,
3535
},
3636
textColor: {
37-
type: String
38-
}
39-
}
37+
type: String,
38+
},
39+
};
4040

41-
export type BadgeProps = ExtractPropTypes<typeof badgeProps>
41+
export type BadgeProps = ExtractPropTypes<typeof badgeProps>;

Diff for: ‎packages/devui-vue/devui/badge/src/badge.tsx

+30-35
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,60 @@
1-
import './badge.scss'
2-
3-
import { defineComponent, computed } from 'vue'
4-
import { badgeProps, BadgeProps } from './badge-types'
1+
import { defineComponent, computed } from 'vue';
2+
import { badgeProps, BadgeProps } from './badge-types';
3+
import './badge.scss';
54

65
export default defineComponent({
76
name: 'DBadge',
87
props: badgeProps,
9-
emits: [],
108
setup(props: BadgeProps, ctx) {
119
const className = computed(() => {
12-
const base = 'devui-badge-content'
10+
const base = 'devui-badge-content';
1311
return [
1412
base,
1513
props.showDot ? `${base}-dot` : `${base}-count`,
1614
props.status && `${base}-${props.status}`,
17-
ctx.slots.default && props.badgePos && `${base}-${props.badgePos}`,
18-
ctx.slots.default && `${base}-fixed`
19-
].join(' ')
20-
})
15+
ctx.slots.default && props.position && `${base}-${props.position}`,
16+
ctx.slots.default && `${base}-fixed`,
17+
].join(' ');
18+
});
2119

2220
const style = computed(() => {
2321
const styleMap = {
2422
bgColor: 'background',
25-
textColor: 'color'
26-
}
27-
const ret = Object.keys(styleMap).reduce((ret, key) => {
28-
if (props[key]) {
29-
ret[styleMap[key]] = props[key]
30-
}
31-
return ret
32-
}, {})
33-
// 偏移量
34-
if (ctx.slots.default && props.offsetXY) {
35-
const [x, y]: Array<number> = props.offsetXY as Array<number>
36-
const [yName, xName] = (props.badgePos as string).split('-')
37-
ret[yName] = y + 'px'
38-
ret[xName] = x + 'px'
23+
textColor: 'color',
24+
};
25+
const ret = Object.keys(styleMap).reduce((result, key) => {
26+
props[key] && (result[styleMap[key]] = props[key]);
27+
return result;
28+
}, {});
29+
if (ctx.slots.default && props.offset) {
30+
const [x, y]: Array<number> = props.offset;
31+
const [yName, xName] = props.position.split('-');
32+
ret[yName] = y + 'px';
33+
ret[xName] = x + 'px';
3934
}
4035

41-
return ret
42-
})
36+
return ret;
37+
});
4338

4439
const text = computed(() => {
4540
if (props.showDot) {
46-
return
41+
return;
4742
}
4843
if (typeof props.count === 'number' && typeof props.maxCount === 'number') {
49-
return props.count > props.maxCount ? `${props.maxCount}+` : props.count
44+
return props.count > props.maxCount ? `${props.maxCount}+` : props.count;
5045
}
51-
return props.count
52-
})
46+
return props.count;
47+
});
5348

5449
return () => {
5550
return (
56-
<div class="devui-badge">
51+
<div class='devui-badge'>
5752
{ctx.slots.default?.()}
5853
<div class={className.value} style={style.value}>
5954
{text.value}
6055
</div>
6156
</div>
62-
)
63-
}
64-
}
65-
})
57+
);
58+
};
59+
},
60+
});

Diff for: ‎packages/devui-vue/devui/overlay/index.ts

+11-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
1-
import type { App } from 'vue'
2-
import {FixedOverlay} from './src/fixed-overlay';
3-
import {FlexibleOverlay } from './src/flexible-overlay';
4-
import {inBrowser} from '../shared/util/common-var';
1+
import type { App } from 'vue';
2+
import { FixedOverlay } from './src/fixed-overlay';
3+
import { FlexibleOverlay } from './src/flexible-overlay';
4+
import { inBrowser } from '../shared/util/common-var';
5+
export * from './src/overlay-types';
56

6-
FlexibleOverlay.install = function(app: App) {
7-
app.component(FlexibleOverlay.name, FlexibleOverlay);
8-
}
9-
10-
FixedOverlay.install = function(app: App) {
11-
app.component(FixedOverlay.name, FixedOverlay);
12-
}
13-
14-
export { FlexibleOverlay, FixedOverlay }
7+
export { FlexibleOverlay, FixedOverlay };
158

169
export default {
1710
title: 'Overlay 遮罩层',
1811
category: '通用',
1912
status: '100%',
2013
install(app: App): void {
21-
app.use(FixedOverlay as any);
22-
app.use(FlexibleOverlay as any);
14+
app.component(FixedOverlay.name, FixedOverlay);
15+
app.component(FlexibleOverlay.name, FlexibleOverlay);
2316

2417
if (inBrowser && !document.getElementById('d-overlay-anchor')) {
2518
const overlayAnchor = document.createElement('div');
@@ -28,7 +21,7 @@ export default {
2821
overlayAnchor.style.left = '0';
2922
overlayAnchor.style.top = '0';
3023
overlayAnchor.style.zIndex = '1000';
31-
document.body.appendChild(overlayAnchor);
24+
document.body.appendChild(overlayAnchor);
3225
}
33-
}
34-
}
26+
},
27+
};

Diff for: ‎packages/devui-vue/devui/overlay/src/fixed-overlay.tsx

+7-19
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,17 @@ export const FixedOverlay = defineComponent({
99
props: fixedOverlayProps,
1010
emits: overlayEmits,
1111
setup(props: FixedOverlayProps, ctx) {
12-
const {
13-
backgroundClass,
14-
overlayClass,
15-
handleBackdropClick,
16-
handleOverlayBubbleCancel
17-
} = useOverlayLogic(props, ctx);
12+
const { backgroundClass, overlayClass, handleBackdropClick, handleOverlayBubbleCancel } = useOverlayLogic(props, ctx);
1813

1914
return () => (
2015
<CommonOverlay>
21-
<div
22-
v-show={props.visible}
23-
class={backgroundClass.value}
24-
style={props.backgroundStyle}
25-
onClick={handleBackdropClick}
26-
>
27-
<div
28-
class={overlayClass.value}
29-
style={props.overlayStyle}
30-
onClick={handleOverlayBubbleCancel}
31-
>
32-
{renderSlot(ctx.slots, 'default')}
16+
{props.visible && (
17+
<div class={backgroundClass.value} style={props.backgroundStyle} onClick={handleBackdropClick}>
18+
<div class={overlayClass.value} style={props.overlayStyle} onClick={handleOverlayBubbleCancel}>
19+
{renderSlot(ctx.slots, 'default')}
20+
</div>
3321
</div>
34-
</div>
22+
)}
3523
</CommonOverlay>
3624
);
3725
},

Diff for: ‎packages/devui-vue/devui/overlay/src/flexible-overlay.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import '../../styles-var/devui-var.scss';
2+
3+
.devui-flexible-overlay {
4+
position: fixed;
5+
border-radius: $devui-border-radius;
6+
background-color: $devui-connected-overlay-bg;
7+
box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
8+
z-index: 1000;
9+
10+
&-arrow {
11+
position: absolute;
12+
width: 8px;
13+
height: 8px;
14+
transform: rotate(45deg);
15+
background-color: inherit;
16+
}
17+
}

0 commit comments

Comments
 (0)