Skip to content

Commit f3e81d5

Browse files
woothuwoothu
committed
fix: CTooltip, CPopover: add legacy styles
1 parent 40a6ca9 commit f3e81d5

File tree

8 files changed

+396
-11
lines changed

8 files changed

+396
-11
lines changed

‎jest.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@ module.exports = {
1515
'src/**/*.{js,vue}',
1616
'!src/index.umd.js',
1717
'!**/node_modules/**'
18-
]
18+
],
19+
moduleNameMapper: {
20+
'\\.(css|less)$': 'identity-obj-proxy'
21+
}
1922
};

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
"./src/components/alert/CAlert.vue",
1616
"./src/components/table/CDataTable.vue",
1717
"./src/components/tabs/CTab.vue",
18-
"./src/components/toast/CCarousel.vue"
18+
"./src/components/toast/CCarousel.vue",
19+
"./src/directives/old-popover.css",
20+
"./src/directives/old-tooltip.css"
1921
],
2022
"homepage": "https://coreui.io",
2123
"author": {
@@ -89,6 +91,7 @@
8991
"core-js": "~3.6.5",
9092
"eslint": "~6.8.0",
9193
"eslint-plugin-vue": "~6.2.2",
94+
"identity-obj-proxy": "^3.0.0",
9295
"node-sass": "~4.14.1",
9396
"node-sass-magic-importer": "~5.3.2",
9497
"npm-run-all": "~4.1.5",

‎src/directives/CPopover.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Tooltip from 'tooltip.js'
2+
import './old-popover.css'
23

34
export default {
45
name: 'c-popover',
@@ -32,7 +33,7 @@ export default {
3233
delay: props.delay || 0,
3334
offset: props.offset || 0,
3435
arrowSelector: '.arrow',
35-
innerSelector: '.popover-body',
36+
innerSelector: '.popover-old-body',
3637
template: binding.def.getTemplate(props.header),
3738
boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
3839
container: props.appendToBody ? document.body : false,
@@ -41,10 +42,10 @@ export default {
4142
}
4243
},
4344
getTemplate (header) {
44-
return `<div class="popover bs-popover-auto fade show" role="tooltip">
45+
return `<div class="popover-old bs-popover-old-auto fade show" role="tooltip">
4546
<div class="arrow"></div>
46-
<h3 class="popover-header">${header || 'header'}</h3>
47-
<div class="popover-body"></div>
47+
<h3 class="popover-old-header">${header || 'header'}</h3>
48+
<div class="popover-old-body"></div>
4849
</div>`
4950
}
5051
}

‎src/directives/CTooltip.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import Tooltip from 'tooltip.js'
2+
import './old-tooltip.css'
3+
24
export default {
35
name: 'c-tooltip',
46
inserted (el, binding) {
@@ -29,7 +31,7 @@ export default {
2931
delay: props.delay || 0,
3032
offset: props.offset || 0,
3133
arrowSelector: '.arrow',
32-
innerSelector: '.tooltip-inner',
34+
innerSelector: '.tooltip-old-inner',
3335
template: binding.def.getTemplate(),
3436
boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
3537
container: props.appendToBody ? document.body : false,
@@ -38,9 +40,9 @@ export default {
3840
}
3941
},
4042
getTemplate () {
41-
return `<div class="tooltip bs-tooltip-auto fade show" role="tooltip">
43+
return `<div class="tooltip-old bs-tooltip-old-auto fade show" role="tooltip">
4244
<div class="arrow"></div>
43-
<div class="tooltip-inner"></div>
45+
<div class="tooltip-old-inner"></div>
4446
</div>`
4547
}
4648
}

‎src/directives/old-popover.css‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
.popover-old {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
z-index: 1060;
6+
display: block;
7+
max-width: 276px;
8+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
9+
font-style: normal;
10+
font-weight: 400;
11+
line-height: 1.5;
12+
text-align: left;
13+
text-align: start;
14+
text-decoration: none;
15+
text-shadow: none;
16+
text-transform: none;
17+
letter-spacing: normal;
18+
word-break: normal;
19+
word-spacing: normal;
20+
white-space: normal;
21+
line-break: auto;
22+
font-size: 0.765625rem;
23+
word-wrap: break-word;
24+
background-clip: padding-box;
25+
border: 1px solid;
26+
border-radius: 0.3rem;
27+
background-color: #fff;
28+
border-color: rgba(0, 0, 21, 0.2);
29+
}
30+
31+
.c-legacy-theme .popover-old {
32+
background-color: #fff;
33+
border-color: rgba(0, 0, 0, 0.2);
34+
}
35+
36+
.c-dark-theme .popover-old {
37+
background-color: #1e1e29;
38+
border-color: #181924;
39+
}
40+
41+
.popover-old .arrow {
42+
position: absolute;
43+
display: block;
44+
width: 1rem;
45+
height: 0.5rem;
46+
margin: 0 0.3rem;
47+
}
48+
49+
.popover-old .arrow::before, .popover-old .arrow::after {
50+
position: absolute;
51+
display: block;
52+
content: "";
53+
border-color: transparent;
54+
border-style: solid;
55+
}
56+
57+
.bs-popover-old-top, .bs-popover-old-auto[x-placement^="top"] {
58+
margin-bottom: 0.5rem;
59+
}
60+
61+
.bs-popover-old-top > .arrow, .bs-popover-old-auto[x-placement^="top"] > .arrow {
62+
bottom: calc(-0.5rem - 1px);
63+
}
64+
65+
.bs-popover-old-top > .arrow::before, .bs-popover-old-auto[x-placement^="top"] > .arrow::before {
66+
bottom: 0;
67+
border-width: 0.5rem 0.5rem 0;
68+
border-top-color: rgba(0, 0, 21, 0.25);
69+
}
70+
71+
.c-legacy-theme .bs-popover-old-top > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::before {
72+
border-top-color: rgba(0, 0, 0, 0.25);
73+
}
74+
75+
.c-dark-theme .bs-popover-old-top > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::before {
76+
border-top-color: #181924;
77+
}
78+
79+
.bs-popover-old-top > .arrow::after, .bs-popover-old-auto[x-placement^="top"] > .arrow::after {
80+
bottom: 1px;
81+
border-width: 0.5rem 0.5rem 0;
82+
border-top-color: #fff;
83+
}
84+
85+
.c-legacy-theme .bs-popover-old-top > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::after {
86+
border-top-color: #fff;
87+
}
88+
89+
.c-dark-theme .bs-popover-old-top > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="top"] > .arrow::after {
90+
border-top-color: #1e1e29;
91+
}
92+
93+
.bs-popover-old-right, .bs-popover-old-auto[x-placement^="right"] {
94+
margin-left: 0.5rem;
95+
}
96+
97+
.bs-popover-old-right > .arrow, .bs-popover-old-auto[x-placement^="right"] > .arrow {
98+
left: calc(-0.5rem - 1px);
99+
width: 0.5rem;
100+
height: 1rem;
101+
margin: 0.3rem 0;
102+
}
103+
104+
.bs-popover-old-right > .arrow::before, .bs-popover-old-auto[x-placement^="right"] > .arrow::before {
105+
left: 0;
106+
border-width: 0.5rem 0.5rem 0.5rem 0;
107+
border-right-color: rgba(0, 0, 21, 0.25);
108+
}
109+
110+
.c-legacy-theme .bs-popover-old-right > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::before {
111+
border-right-color: rgba(0, 0, 0, 0.25);
112+
}
113+
114+
.c-dark-theme .bs-popover-old-right > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::before {
115+
border-right-color: #181924;
116+
}
117+
118+
.bs-popover-old-right > .arrow::after, .bs-popover-old-auto[x-placement^="right"] > .arrow::after {
119+
left: 1px;
120+
border-width: 0.5rem 0.5rem 0.5rem 0;
121+
border-right-color: #fff;
122+
}
123+
124+
.c-legacy-theme .bs-popover-old-right > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::after {
125+
border-right-color: #fff;
126+
}
127+
128+
.c-dark-theme .bs-popover-old-right > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="right"] > .arrow::after {
129+
border-right-color: #1e1e29;
130+
}
131+
132+
.bs-popover-old-bottom, .bs-popover-old-auto[x-placement^="bottom"] {
133+
margin-top: 0.5rem;
134+
}
135+
136+
.bs-popover-old-bottom > .arrow, .bs-popover-old-auto[x-placement^="bottom"] > .arrow {
137+
top: calc(-0.5rem - 1px);
138+
}
139+
140+
.bs-popover-old-bottom > .arrow::before, .bs-popover-old-auto[x-placement^="bottom"] > .arrow::before {
141+
top: 0;
142+
border-width: 0 0.5rem 0.5rem 0.5rem;
143+
border-bottom-color: rgba(0, 0, 21, 0.25);
144+
}
145+
146+
.c-legacy-theme .bs-popover-old-bottom > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::before {
147+
border-bottom-color: rgba(0, 0, 0, 0.25);
148+
}
149+
150+
.c-dark-theme .bs-popover-old-bottom > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::before {
151+
border-bottom-color: #181924;
152+
}
153+
154+
.bs-popover-old-bottom > .arrow::after, .bs-popover-old-auto[x-placement^="bottom"] > .arrow::after {
155+
top: 1px;
156+
border-width: 0 0.5rem 0.5rem 0.5rem;
157+
border-bottom-color: #fff;
158+
}
159+
160+
.c-legacy-theme .bs-popover-old-bottom > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::after {
161+
border-bottom-color: #fff;
162+
}
163+
164+
.c-dark-theme .bs-popover-old-bottom > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="bottom"] > .arrow::after {
165+
border-bottom-color: #1e1e29;
166+
}
167+
168+
.bs-popover-old-bottom .popover-old-header::before, .bs-popover-old-auto[x-placement^="bottom"] .popover-old-header::before {
169+
position: absolute;
170+
top: 0;
171+
left: 50%;
172+
display: block;
173+
width: 1rem;
174+
margin-left: -0.5rem;
175+
content: "";
176+
border-bottom: 1px solid;
177+
border-bottom-color: #f7f7f7;
178+
}
179+
180+
.c-legacy-theme .bs-popover-old-bottom .popover-old-header::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="bottom"] .popover-old-header::before {
181+
border-bottom-color: #f7f7f7;
182+
}
183+
184+
.c-dark-theme .bs-popover-old-bottom .popover-old-header::before, .c-dark-theme .bs-popover-old-auto[x-placement^="bottom"] .popover-old-header::before {
185+
border-bottom-color: #181924;
186+
}
187+
188+
.bs-popover-old-left, .bs-popover-old-auto[x-placement^="left"] {
189+
margin-right: 0.5rem;
190+
}
191+
192+
.bs-popover-old-left > .arrow, .bs-popover-old-auto[x-placement^="left"] > .arrow {
193+
right: calc(-0.5rem - 1px);
194+
width: 0.5rem;
195+
height: 1rem;
196+
margin: 0.3rem 0;
197+
}
198+
199+
.bs-popover-old-left > .arrow::before, .bs-popover-old-auto[x-placement^="left"] > .arrow::before {
200+
right: 0;
201+
border-width: 0.5rem 0 0.5rem 0.5rem;
202+
border-left-color: rgba(0, 0, 21, 0.25);
203+
}
204+
205+
.c-legacy-theme .bs-popover-old-left > .arrow::before, .c-legacy-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::before {
206+
border-left-color: rgba(0, 0, 0, 0.25);
207+
}
208+
209+
.c-dark-theme .bs-popover-old-left > .arrow::before, .c-dark-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::before {
210+
border-left-color: #181924;
211+
}
212+
213+
.bs-popover-old-left > .arrow::after, .bs-popover-old-auto[x-placement^="left"] > .arrow::after {
214+
right: 1px;
215+
border-width: 0.5rem 0 0.5rem 0.5rem;
216+
border-left-color: #fff;
217+
}
218+
219+
.c-legacy-theme .bs-popover-old-left > .arrow::after, .c-legacy-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::after {
220+
border-left-color: #fff;
221+
}
222+
223+
.c-dark-theme .bs-popover-old-left > .arrow::after, .c-dark-theme .bs-popover-old-auto[x-placement^="left"] > .arrow::after {
224+
border-left-color: #1e1e29;
225+
}
226+
227+
.popover-old-header {
228+
padding: 0.5rem 0.75rem;
229+
margin-bottom: 0;
230+
font-size: 0.875rem;
231+
border-bottom: 1px solid;
232+
border-top-left-radius: calc(0.3rem - 1px);
233+
border-top-right-radius: calc(0.3rem - 1px);
234+
background-color: #f7f7f7;
235+
border-bottom-color: #ebebeb;
236+
}
237+
238+
.c-legacy-theme .popover-old-header {
239+
background-color: #f7f7f7;
240+
border-bottom-color: #ebebeb;
241+
}
242+
243+
.c-dark-theme .popover-old-header {
244+
color: #e1e1e1;
245+
background-color: #181924;
246+
border-bottom-color: #0e0e15;
247+
}
248+
249+
.popover-old-header:empty {
250+
display: none;
251+
}
252+
253+
.popover-old-body {
254+
padding: 0.5rem 0.75rem;
255+
color: #4f5d73;
256+
}
257+
258+
.c-legacy-theme .popover-old-body {
259+
color: #23282c;
260+
}
261+
262+
.c-dark-theme .popover-old-body {
263+
color: #e1e1e1;
264+
}

0 commit comments

Comments
 (0)