n20-common-lib 3.0.48 → 3.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/assets/css/secondary-tab.scss +6 -0
- package/src/assets/css/tabs.scss +26 -0
- package/src/assets/css/tertiary-tab.scss +58 -1
- package/src/components/ProFilterView/index.vue +4 -4
- package/src/components/Tabs/index.vue +20 -5
- package/src/components/TertiaryTab/index.vue +20 -1
- package/style/index.css +1 -1
- package/theme/blue.css +1 -1
- package/theme/cctcRed.css +1 -1
- package/theme/green.css +1 -1
- package/theme/lightBlue.css +1 -1
- package/theme/orange.css +1 -1
- package/theme/purple.css +1 -1
- package/theme/red.css +1 -1
- package/theme/yellow.css +1 -1
package/package.json
CHANGED
package/src/assets/css/tabs.scss
CHANGED
|
@@ -3,9 +3,16 @@
|
|
|
3
3
|
justify-content: space-between;
|
|
4
4
|
align-items: center;
|
|
5
5
|
border-bottom: 1px solid #e5e6eb;
|
|
6
|
+
|
|
6
7
|
.n20-tabs__tab {
|
|
7
8
|
display: inline-block;
|
|
8
9
|
max-width: 100%;
|
|
10
|
+
.el-tabs__nav-wrap {
|
|
11
|
+
// overflow: visible;
|
|
12
|
+
}
|
|
13
|
+
.el-tabs__nav-scroll {
|
|
14
|
+
overflow: visible;
|
|
15
|
+
}
|
|
9
16
|
& > .el-tabs__header {
|
|
10
17
|
border: none;
|
|
11
18
|
margin-bottom: 0;
|
|
@@ -60,6 +67,25 @@
|
|
|
60
67
|
border-radius: 3px;
|
|
61
68
|
}
|
|
62
69
|
|
|
70
|
+
.el-tabs__item-badge-count {
|
|
71
|
+
position: absolute;
|
|
72
|
+
right: -6px;
|
|
73
|
+
top: -3px;
|
|
74
|
+
background: #ff3b30;
|
|
75
|
+
border: 2px solid #fff;
|
|
76
|
+
border-radius: 100px;
|
|
77
|
+
color: #fff;
|
|
78
|
+
font-size: 12px;
|
|
79
|
+
line-height: 20px;
|
|
80
|
+
font-family: 'PingFang SC';
|
|
81
|
+
padding: 0 6px;
|
|
82
|
+
text-align: center;
|
|
83
|
+
white-space: nowrap;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
z-index: 1;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
63
89
|
.el-tabs__nav-prev,
|
|
64
90
|
.el-tabs__nav-next {
|
|
65
91
|
line-height: 26px;
|
|
@@ -37,7 +37,12 @@
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
.el-tabs__nav-wrap {
|
|
41
|
+
overflow: visible;
|
|
42
|
+
}
|
|
43
|
+
.el-tabs__nav-scroll {
|
|
44
|
+
overflow: visible;
|
|
45
|
+
}
|
|
41
46
|
.el-tabs__item-badge {
|
|
42
47
|
width: 6px;
|
|
43
48
|
height: 6px;
|
|
@@ -48,12 +53,64 @@
|
|
|
48
53
|
border-radius: 3px;
|
|
49
54
|
}
|
|
50
55
|
|
|
56
|
+
.el-tabs__item-badge-count {
|
|
57
|
+
position: absolute;
|
|
58
|
+
right: -6px;
|
|
59
|
+
top: -10px;
|
|
60
|
+
background: #ff3b30;
|
|
61
|
+
border: 2px solid #fff;
|
|
62
|
+
border-radius: 100px;
|
|
63
|
+
color: #fff;
|
|
64
|
+
font-size: 12px;
|
|
65
|
+
line-height: 20px;
|
|
66
|
+
font-family: 'PingFang SC';
|
|
67
|
+
padding: 0 6px;
|
|
68
|
+
text-align: center;
|
|
69
|
+
white-space: nowrap;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
z-index: 1;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.el-tabs__item.is-top:last-child {
|
|
75
|
+
.el-tabs__item-badge {
|
|
76
|
+
right: -4px;
|
|
77
|
+
}
|
|
78
|
+
.el-tabs__item-badge-count {
|
|
79
|
+
right: -4px;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.el-tabs__nav-wrap {
|
|
84
|
+
overflow: visible !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
51
87
|
.el-tabs__nav-prev,
|
|
52
88
|
.el-tabs__nav-next {
|
|
53
89
|
line-height: 28px;
|
|
54
90
|
}
|
|
55
91
|
}
|
|
56
92
|
|
|
93
|
+
.n20-tertiary-tab-tooltip {
|
|
94
|
+
background: #1d2129 !important;
|
|
95
|
+
color: #fff !important;
|
|
96
|
+
font-family: 'PingFang SC', sans-serif !important;
|
|
97
|
+
font-size: 14px !important;
|
|
98
|
+
line-height: 22px !important;
|
|
99
|
+
padding: 8px 12px !important;
|
|
100
|
+
border-radius: 4px !important;
|
|
101
|
+
box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
|
|
102
|
+
0 9px 28px 0 rgba(0, 0, 0, 0.05),
|
|
103
|
+
0 12px 48px 16px rgba(0, 0, 0, 0.03) !important;
|
|
104
|
+
border: none !important;
|
|
105
|
+
|
|
106
|
+
.popper__arrow {
|
|
107
|
+
border-top-color: #1d2129 !important;
|
|
108
|
+
&::after {
|
|
109
|
+
border-top-color: #1d2129 !important;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
57
114
|
.n20-tertiary-tab {
|
|
58
115
|
max-width: 100%;
|
|
59
116
|
white-space: nowrap;
|
|
@@ -322,14 +322,14 @@ export default {
|
|
|
322
322
|
this.$emit('changeFn', value)
|
|
323
323
|
},
|
|
324
324
|
filterFn() {
|
|
325
|
-
this.$emit('filter', this.filterObj)
|
|
325
|
+
this.$emit('filter', this.filterObj, 'filter')
|
|
326
326
|
},
|
|
327
327
|
handleClean() {
|
|
328
|
-
this.$emit('filter', this.filterObj)
|
|
328
|
+
this.$emit('filter', this.filterObj, 'clean')
|
|
329
329
|
},
|
|
330
330
|
handleClear() {
|
|
331
331
|
this.searchValue = { ...this.getInitialSearchValue }
|
|
332
|
-
this.$emit('filter', this.filterObj)
|
|
332
|
+
this.$emit('filter', this.filterObj, 'clear')
|
|
333
333
|
},
|
|
334
334
|
isEnter() {
|
|
335
335
|
this.$rulesValidateForm('ruleValidate', (valid) => {
|
|
@@ -525,7 +525,7 @@ export default {
|
|
|
525
525
|
this.conditionGroups = JSON.parse(item.viewConfig)?.conditionGroups || []
|
|
526
526
|
this.searchValue = { ...this.getInitialSearchValue }
|
|
527
527
|
}
|
|
528
|
-
this.$emit('filter', this.filterObj)
|
|
528
|
+
this.$emit('filter', this.filterObj, 'filter')
|
|
529
529
|
},
|
|
530
530
|
// 拖动保存视图列表
|
|
531
531
|
fn(list) {
|
|
@@ -11,7 +11,17 @@
|
|
|
11
11
|
>
|
|
12
12
|
<template slot="label">
|
|
13
13
|
<span v-if="item.icon" :class="item.icon"></span>
|
|
14
|
-
<sup v-if="item.badge" class="el-tabs__item-badge"></sup>
|
|
14
|
+
<sup v-if="item.badge && typeof item.badge === 'boolean'" class="el-tabs__item-badge"></sup>
|
|
15
|
+
<el-tooltip
|
|
16
|
+
v-else-if="item.badge && item.tooltip"
|
|
17
|
+
:content="getTooltipContent(item.tooltip)"
|
|
18
|
+
placement="top"
|
|
19
|
+
:popper-class="'n20-tabs-tooltip'"
|
|
20
|
+
:enterable="false"
|
|
21
|
+
>
|
|
22
|
+
<span class="el-tabs__item-badge-count">{{ badgeText(item.badge) }}</span>
|
|
23
|
+
</el-tooltip>
|
|
24
|
+
<span v-else-if="item.badge" class="el-tabs__item-badge-count">{{ badgeText(item.badge) }}</span>
|
|
15
25
|
<span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
|
|
16
26
|
<span v-else>{{ item.name }}</span>
|
|
17
27
|
</template>
|
|
@@ -35,10 +45,6 @@ export default {
|
|
|
35
45
|
init: {
|
|
36
46
|
type: String,
|
|
37
47
|
default: ''
|
|
38
|
-
},
|
|
39
|
-
size: {
|
|
40
|
-
type: String,
|
|
41
|
-
default: 'mini'
|
|
42
48
|
}
|
|
43
49
|
},
|
|
44
50
|
computed: {
|
|
@@ -47,6 +53,15 @@ export default {
|
|
|
47
53
|
}
|
|
48
54
|
},
|
|
49
55
|
methods: {
|
|
56
|
+
badgeText(badge) {
|
|
57
|
+
if (typeof badge === 'number') {
|
|
58
|
+
return badge > 99 ? '99+' : badge
|
|
59
|
+
}
|
|
60
|
+
return badge
|
|
61
|
+
},
|
|
62
|
+
getTooltipContent(tooltip) {
|
|
63
|
+
return typeof tooltip === 'function' ? tooltip() : tooltip
|
|
64
|
+
},
|
|
50
65
|
clickFn(C) {
|
|
51
66
|
let item = C.$attrs['tab-info']
|
|
52
67
|
if (this.$listeners['update:init']) {
|
|
@@ -10,7 +10,17 @@
|
|
|
10
10
|
>
|
|
11
11
|
<template slot="label">
|
|
12
12
|
<span v-if="item.icon" :class="item.icon"></span>
|
|
13
|
-
<sup v-if="item.badge" class="el-tabs__item-badge"></sup>
|
|
13
|
+
<sup v-if="item.badge && typeof item.badge === 'boolean'" class="el-tabs__item-badge"></sup>
|
|
14
|
+
<el-tooltip
|
|
15
|
+
v-else-if="item.badge && item.tooltip"
|
|
16
|
+
:content="getTooltipContent(item.tooltip)"
|
|
17
|
+
placement="top"
|
|
18
|
+
:popper-class="'n20-tertiary-tab-tooltip'"
|
|
19
|
+
:enterable="false"
|
|
20
|
+
>
|
|
21
|
+
<span class="el-tabs__item-badge-count">{{ badgeText(item.badge) }}</span>
|
|
22
|
+
</el-tooltip>
|
|
23
|
+
<span v-else-if="item.badge" class="el-tabs__item-badge-count">{{ badgeText(item.badge) }}</span>
|
|
14
24
|
<span v-if="item.content" v-title="`${item.content}`"> {{ item.name }}</span>
|
|
15
25
|
<span v-else>{{ item.name }}</span>
|
|
16
26
|
</template>
|
|
@@ -42,6 +52,15 @@ export default {
|
|
|
42
52
|
}
|
|
43
53
|
},
|
|
44
54
|
methods: {
|
|
55
|
+
badgeText(badge) {
|
|
56
|
+
if (typeof badge === 'number') {
|
|
57
|
+
return badge > 99 ? '99+' : badge
|
|
58
|
+
}
|
|
59
|
+
return badge
|
|
60
|
+
},
|
|
61
|
+
getTooltipContent(tooltip) {
|
|
62
|
+
return typeof tooltip === 'function' ? tooltip() : tooltip
|
|
63
|
+
},
|
|
45
64
|
clickFn(C) {
|
|
46
65
|
let item = C.$attrs['tab-info']
|
|
47
66
|
if (this.$listeners['update:init']) {
|