Skip to content

Commit f3200f0

Browse files
AlanLee97AlanLee97
authored
refactor(form): 给样式名增加devui-前缀 (#246)
* fix: 给样式加上devui-前缀 * fix: 去除无用注释
1 parent 18ab08f commit f3200f0

File tree

13 files changed

+41
-69
lines changed

13 files changed

+41
-69
lines changed

‎packages/devui-vue/devui/form/src/directive/d-validate-rules.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,13 +201,13 @@ function getKeyValueOfObjectList(obj): {key: string; value: any;}[] {
201201

202202
function handleErrorStrategy(el: HTMLElement): void {
203203
const classList: Array<string> = [...el.classList];
204-
classList.push('d-validate-rules-error-pristine');
204+
classList.push('devui-validate-rules-error-pristine');
205205
el.setAttribute('class', classList.join(' '));
206206
}
207207

208208
function handleErrorStrategyPass(el: HTMLElement): void {
209209
const classList: Array<string> = [...el.classList];
210-
const index = classList.indexOf('d-validate-rules-error-pristine');
210+
const index = classList.indexOf('devui-validate-rules-error-pristine');
211211
index !== -1 && classList.splice(index, 1);
212212
el.setAttribute('class', classList.join(' '));
213213
}
@@ -242,7 +242,7 @@ function handleValidateError({el, tipEl, message = '', isFormTag, messageShowTyp
242242

243243
tipEl.innerText = '' + message;
244244
tipEl.style.display = 'inline-flex';
245-
tipEl.setAttribute('class', 'd-validate-tip');
245+
tipEl.setAttribute('class', 'devui-validate-tip');
246246
handleErrorStrategy(el);
247247
}
248248

‎packages/devui-vue/devui/form/src/directive/style.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
.d-validate-rules-error-pristine {
2+
.devui-validate-rules-error-pristine {
33
// background-color: #ffeeed;
44
input {
55
background-color: #ffeeed;
@@ -16,7 +16,9 @@
1616
}
1717

1818
.devui-validate-tip {
19-
text-align: left;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
2022
font-size: 12px;
2123
color: #f66f6a;
2224
}

‎packages/devui-vue/devui/form/src/form-control/form-control.scss

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
.form-control {
1+
.devui-form-control {
22
position: relative;
3+
width: 100%;
34

4-
.star {
5+
.devui-star {
56
color: red;
67
}
78

89
.devui-form-control-container {
910
position: relative;
1011

11-
.feedback-status {
12+
.devui-feedback-status {
1213
position: absolute;
1314
top: 50%;
1415
right: 0;
@@ -31,6 +32,7 @@
3132

3233
.devui-form-control-container-horizontal {
3334
display: flex;
35+
width: 100%;
3436

3537
.devui-radio {
3638
&:not(:last-child) {
@@ -50,41 +52,16 @@
5052
}
5153
}
5254

53-
input,
54-
.devui-tags-host {
55-
width: 200px;
56-
}
57-
58-
.d-validate-tip {
59-
margin: 0 10px;
55+
.devui-validate-tip {
56+
margin: 0;
6057
}
6158
}
6259

6360
.devui-control-content-wrapper {
64-
.devui-popover-wrapper {
65-
position: absolute;
66-
width: 100%;
67-
height: 100%;
68-
left: 0;
69-
top: 0;
70-
z-index: 9;
71-
72-
& > div {
73-
width: inherit;
74-
height: 100%;
75-
}
76-
}
77-
}
78-
79-
.with-popover {
80-
position: relative;
81-
82-
& > div {
83-
z-index: 10;
84-
}
61+
width: 100%;
8562
}
8663

87-
.has-feedback {
64+
.devui-has-feedback {
8865
display: flex;
8966
align-items: center;
9067

@@ -93,7 +70,7 @@
9370
}
9471
}
9572

96-
.feedback-error {
73+
.devui-feedback-error {
9774
border: 1px solid #f66f6a;
9875
border-radius: 2px;
9976

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default defineComponent({
7777
feedbackStatus,
7878
extraInfo,
7979
} = props;
80-
return <div class="form-control" ref={formControl} data-uid={uid} v-clickoutside={handleClickOutside}>
80+
return <div class="devui-form-control" ref={formControl} data-uid={uid} v-clickoutside={handleClickOutside}>
8181
{ showPopover.value &&
8282
<Teleport to="body">
8383
<div style={{
@@ -91,13 +91,13 @@ export default defineComponent({
9191
</div>
9292
</Teleport>
9393
}
94-
<div class={`devui-form-control-container${isHorizontal ? ' devui-form-control-container-horizontal' : ''}${feedbackStatus ? ' has-feedback' : ''}${feedbackStatus === 'error' ? ' feedback-error' : ''}`}>
94+
<div class={`devui-form-control-container${isHorizontal ? ' devui-form-control-container-horizontal' : ''}${feedbackStatus ? ' devui-has-feedback' : ''}${feedbackStatus === 'error' ? ' devui-feedback-error' : ''}`}>
9595
<div class="devui-control-content-wrapper" id={uid}>
9696
{ctx.slots.default?.()}
9797
</div>
9898
{
9999
(feedbackStatus || ctx.slots.suffixTemplate?.()) &&
100-
<span class="feedback-status">
100+
<span class="devui-feedback-status">
101101
{ctx.slots.suffixTemplate?.() ? ctx.slots.suffixTemplate?.() : <Icon name={iconData.value.name} color={iconData.value.color}></Icon>}
102102
</span>
103103
}

‎packages/devui-vue/devui/form/src/form-item/form-item.scss

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
1-
.form-item {
1+
.devui-form-item {
22
display: flex;
33
// align-items: center;
44
margin-bottom: 20px;
55
}
66

7-
.form-item-vertical {
7+
.devui-form-item-vertical {
88
flex-direction: column;
99
}
1010

11-
.form-item-columns {
11+
.devui-form-item-columns {
1212
flex-direction: column;
1313
display: inline-block !important;
1414
}
1515
// .u-1-3 {
1616
// width: 33.3%;
1717
// }
18-
.column-item {
18+
.devui-column-item {
1919
margin-bottom: 20px;
2020
}
2121

22-
.column-item .form-control {
23-
width: 60% !important;
24-
}
2522

26-
.d-validate-tip {
23+
.devui-validate-tip {
2724
display: flex;
2825
justify-content: center;
2926
align-items: center;
3027
font-size: 12px;
3128
color: #f66f6a;
3229
}
3330

34-
.d-validate-tip-horizontal {
31+
.devui-validate-tip-horizontal {
3532
margin-left: 10px;
3633
}

‎packages/devui-vue/devui/form/src/form-item/form-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ export default defineComponent({
100100
});
101101
return () => {
102102
return (
103-
<div class={`form-item${isHorizontal ? '' : (isVertical ? ' form-item-vertical' : ' form-item-columns')}${isColumns ? ' column-item ' + columnsClass.value : ''}`}>
103+
<div class={`devui-form-item${isHorizontal ? '' : (isVertical ? ' devui-form-item-vertical' : ' devui-form-item-columns')}${isColumns ? ' devui-column-item ' + columnsClass.value : ''}`}>
104104
{ctx.slots.default?.()}
105-
<div class={`d-validate-tip${isHorizontal ? ' d-validate-tip-horizontal' : ''}`}>{showMessage.value && tipMessage.value}</div>
105+
<div class={`devui-validate-tip${isHorizontal ? ' devui-validate-tip-horizontal' : ''}`}>{showMessage.value && tipMessage.value}</div>
106106
</div>
107107
)
108108
}

‎packages/devui-vue/devui/form/src/form-label/form-label.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.form-label {
1+
.devui-form-label {
22
// flex: 1 1 auto;
33
-moz-box-flex: 1;
44
text-align: left;
@@ -21,30 +21,30 @@
2121
}
2222
}
2323

24-
.form-label_sm {
24+
.devui-form-label_sm {
2525
width: 80px;
2626
min-width: 80px;
2727
}
2828

29-
.form-label_sd {
29+
.devui-form-label_sd {
3030
width: 100px;
3131
min-width: 100px;
3232
}
3333

34-
.form-label_lg {
34+
.devui-form-label_lg {
3535
width: 150px;
3636
min-width: 150px;
3737
}
3838

39-
.form-label_center {
39+
.devui-form-label_center {
4040
text-align: center;
4141
}
4242

43-
.form-label_end {
43+
.devui-form-label_end {
4444
text-align: end;
4545
}
4646

47-
.form-label-help {
47+
.devui-form-label-help {
4848
border-radius: 50%;
4949
display: inline-flex;
5050
justify-content: center;

‎packages/devui-vue/devui/form/src/form-label/form-label.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default defineComponent({
1717
const isCenter = computed(() => labelData.labelAlign === 'center').value;
1818
const isEnd = computed(() => labelData.labelAlign === 'end').value;
1919

20-
const wrapperCls = `form-label${isHorizontal ? (isSm ? ' form-label_sm' : (isLg ? ' form-label_lg' : ' form-label_sd')) : ''}${isCenter ? ' form-label_center' : (isEnd ? ' form-label_end' : '')}`;
20+
const wrapperCls = `devui-form-label${isHorizontal ? (isSm ? ' devui-form-label_sm' : (isLg ? ' devui-form-label_lg' : ' devui-form-label_sd')) : ''}${isCenter ? ' devui-form-label_center' : (isEnd ? ' devui-form-label_end' : '')}`;
2121
const className = `${props.required ? ' devui-required' : ''}`;
2222
const style = {display: isHorizontal ? 'inline' : 'inline-block'};
2323

@@ -29,7 +29,7 @@ export default defineComponent({
2929
props.hasHelp && props.helpTips && (
3030
<Popover content={props.helpTips} showAnimation={false} position={'top'} trigger={'hover'} v-slots={{
3131
reference: () => (
32-
<span class="form-label-help">
32+
<span class="devui-form-label-help">
3333
<Icon name="helping" color="#252b3a"></Icon>
3434
</span>
3535
)

‎packages/devui-vue/devui/form/src/form-operation/form-operation.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.form-operation {
1+
.devui-form-operation {
22
.star {
33
color: red;
44
}

‎packages/devui-vue/devui/form/src/form-operation/form-operation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default defineComponent({
88
},
99
setup(props, ctx) {
1010
return () => {
11-
return <div class="form-operation">
11+
return <div class="devui-form-operation">
1212
{ctx.slots.default?.()}
1313
</div>
1414
}

0 commit comments

Comments
 (0)