mediacube-ui 0.1.32 → 0.1.34
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
CHANGED
|
@@ -559,7 +559,7 @@ export default {
|
|
|
559
559
|
},
|
|
560
560
|
formattedToNumber(value) {
|
|
561
561
|
const [first] =
|
|
562
|
-
|
|
562
|
+
/-?\d*[\.]?\d*/.exec(
|
|
563
563
|
String(value)
|
|
564
564
|
?.replace(/ /gm, '')
|
|
565
565
|
?.trim(),
|
|
@@ -604,7 +604,7 @@ export default {
|
|
|
604
604
|
const has_fraction = !!String(formatted_number)?.match(/\./)
|
|
605
605
|
|
|
606
606
|
const [int, fraction] = String(formatted_number)
|
|
607
|
-
.replace(/[^\d
|
|
607
|
+
.replace(/[^\d\.-]/g, '')
|
|
608
608
|
.replace(/\B(?=(?:\d{3})+(?!\d))/g, ' ')
|
|
609
609
|
.split('.')
|
|
610
610
|
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
v-tooltip="{ content, placement, classes: tooltipClasses, trigger, show, container }"
|
|
4
|
-
class="mc-tooltip-target"
|
|
5
|
-
>
|
|
2
|
+
<div v-tooltip="tooltipProps" class="mc-tooltip-target">
|
|
6
3
|
<!-- @slot Слот для элемента, у которого будет всплывать тултип -->
|
|
7
4
|
<slot />
|
|
8
5
|
</div>
|
|
@@ -88,17 +85,39 @@ export default {
|
|
|
88
85
|
type: Boolean,
|
|
89
86
|
default: false,
|
|
90
87
|
},
|
|
88
|
+
maxLines: {
|
|
89
|
+
type: Number,
|
|
90
|
+
default: null,
|
|
91
|
+
},
|
|
91
92
|
},
|
|
92
93
|
computed: {
|
|
94
|
+
tooltipProps() {
|
|
95
|
+
return {
|
|
96
|
+
content: this.content,
|
|
97
|
+
placement: this.placement,
|
|
98
|
+
classes: this.tooltipClasses,
|
|
99
|
+
trigger: this.trigger,
|
|
100
|
+
show: this.show,
|
|
101
|
+
container: this.container,
|
|
102
|
+
template: `<div class="tooltip" style="${this.tooltipVariables}" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner test-class"><div class="tooltip-inner__content"></div></div> </div>`,
|
|
103
|
+
innerSelector: '.tooltip-inner__content',
|
|
104
|
+
}
|
|
105
|
+
},
|
|
93
106
|
tooltipClasses() {
|
|
94
107
|
return [
|
|
95
108
|
'mc-tooltip',
|
|
96
109
|
`mc-tooltip--color-${this.color}`,
|
|
97
110
|
`mc-tooltip--width-${this.maxWidth}`,
|
|
98
111
|
`mc-tooltip--size-${this.size}`,
|
|
112
|
+
this.maxLines ? 'mc-tooltip--lines-limit' : '',
|
|
99
113
|
this.arrowDisabled ? 'mc-tooltip--arrow-disabled' : '',
|
|
100
114
|
]
|
|
101
115
|
},
|
|
116
|
+
tooltipVariables() {
|
|
117
|
+
const variables = [this.maxLines && `--tooltip-content-max-lines: ${this.maxLines}`].filter(i => i)
|
|
118
|
+
|
|
119
|
+
return variables.join(' ')
|
|
120
|
+
},
|
|
102
121
|
},
|
|
103
122
|
}
|
|
104
123
|
</script>
|
|
@@ -118,13 +137,16 @@ export default {
|
|
|
118
137
|
.tooltip-inner {
|
|
119
138
|
@include inset-squish-space($space-300);
|
|
120
139
|
background: $color-black;
|
|
121
|
-
color: $color-white;
|
|
122
140
|
border-radius: $radius-100;
|
|
123
|
-
font-family: $font-family-main;
|
|
124
|
-
line-height: $line-height-250;
|
|
125
|
-
font-size: $font-size-300;
|
|
126
141
|
box-shadow: $shadow-s;
|
|
127
142
|
padding: $space-100 $space-150;
|
|
143
|
+
|
|
144
|
+
&__content {
|
|
145
|
+
color: $color-white;
|
|
146
|
+
font-family: $font-family-main;
|
|
147
|
+
line-height: $line-height-250;
|
|
148
|
+
font-size: $font-size-300;
|
|
149
|
+
}
|
|
128
150
|
}
|
|
129
151
|
|
|
130
152
|
.tooltip-arrow {
|
|
@@ -238,7 +260,10 @@ export default {
|
|
|
238
260
|
&.tooltip {
|
|
239
261
|
.tooltip-inner {
|
|
240
262
|
@include inset-squish-space($space-200);
|
|
241
|
-
|
|
263
|
+
|
|
264
|
+
&__content {
|
|
265
|
+
font-size: $font-size-200;
|
|
266
|
+
}
|
|
242
267
|
}
|
|
243
268
|
}
|
|
244
269
|
}
|
|
@@ -246,7 +271,24 @@ export default {
|
|
|
246
271
|
&.tooltip {
|
|
247
272
|
.tooltip-inner {
|
|
248
273
|
@include inset-squish-space($space-300);
|
|
249
|
-
|
|
274
|
+
|
|
275
|
+
&__content {
|
|
276
|
+
font-size: $font-size-300;
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
&--lines-limit {
|
|
284
|
+
&.tooltip {
|
|
285
|
+
.tooltip-inner {
|
|
286
|
+
&__content {
|
|
287
|
+
display: -webkit-box;
|
|
288
|
+
-webkit-box-orient: vertical;
|
|
289
|
+
-webkit-line-clamp: var(--tooltip-content-max-lines);
|
|
290
|
+
overflow: hidden;
|
|
291
|
+
text-overflow: ellipsis;
|
|
250
292
|
}
|
|
251
293
|
}
|
|
252
294
|
}
|