mediacube-ui 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/assets/icons/youtube_outlined.svg

@@ -0,0 +1,4 @@
+<svg data-token-name="youtube_outlined" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.8394 7.34203C20.6294 6.42172 20.008 5.69573 19.2178 5.44641C17.7888 5 12.0551 5 12.0551 5C12.0551 5 6.32426 5 4.89246 5.44641C4.10506 5.69207 3.48358 6.41805 3.27091 7.34203C2.88867 9.01216 2.88867 12.5 2.88867 12.5C2.88867 12.5 2.88867 15.9878 3.27091 17.658C3.48083 18.5783 4.10231 19.3043 4.89246 19.5536C6.32426 20 12.0551 20 12.0551 20C12.0551 20 17.7888 20 19.2178 19.5536C20.0052 19.3079 20.6267 18.582 20.8394 17.658C21.2216 15.9878 21.2216 12.5 21.2216 12.5C21.2216 12.5 21.2216 9.01216 20.8394 7.34203Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2227 15.2499L14.9856 12.5L10.2227 9.75006V15.2499Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/elements/McField/McFieldText/McFieldText.vue

@@ -559,7 +559,7 @@ export default {
         },
         formattedToNumber(value) {
             const [first] =
-                /\d*[\.]?\d*/.exec(
+                /-?\d*[\.]?\d*/.exec(
                     String(value)
                         ?.replace(/ /gm, '')
                         ?.trim(),
@@ -604,7 +604,7 @@ export default {
             const has_fraction = !!String(formatted_number)?.match(/\./)
 
             const [int, fraction] = String(formatted_number)
-                .replace(/[^\d\.]/g, '')
+                .replace(/[^\d\.-]/g, '')
                 .replace(/\B(?=(?:\d{3})+(?!\d))/g, ' ')
                 .split('.')
 

package/src/elements/McTooltip/McTooltip.vue

@@ -1,8 +1,5 @@
 <template>
-    <div
-        v-tooltip="{ content, placement, classes: tooltipClasses, trigger, show, container }"
-        class="mc-tooltip-target"
-    >
+    <div v-tooltip="tooltipProps" class="mc-tooltip-target">
         <!-- @slot Слот для элемента, у которого будет всплывать тултип -->
         <slot />
     </div>
@@ -88,17 +85,39 @@ export default {
             type: Boolean,
             default: false,
         },
+        maxLines: {
+            type: Number,
+            default: null,
+        },
     },
     computed: {
+        tooltipProps() {
+            return {
+                content: this.content,
+                placement: this.placement,
+                classes: this.tooltipClasses,
+                trigger: this.trigger,
+                show: this.show,
+                container: this.container,
+                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>`,
+                innerSelector: '.tooltip-inner__content',
+            }
+        },
         tooltipClasses() {
             return [
                 'mc-tooltip',
                 `mc-tooltip--color-${this.color}`,
                 `mc-tooltip--width-${this.maxWidth}`,
                 `mc-tooltip--size-${this.size}`,
+                this.maxLines ? 'mc-tooltip--lines-limit' : '',
                 this.arrowDisabled ? 'mc-tooltip--arrow-disabled' : '',
             ]
         },
+        tooltipVariables() {
+            const variables = [this.maxLines && `--tooltip-content-max-lines: ${this.maxLines}`].filter(i => i)
+
+            return variables.join(' ')
+        },
     },
 }
 </script>
@@ -118,13 +137,16 @@ export default {
         .tooltip-inner {
             @include inset-squish-space($space-300);
             background: $color-black;
-            color: $color-white;
             border-radius: $radius-100;
-            font-family: $font-family-main;
-            line-height: $line-height-250;
-            font-size: $font-size-300;
             box-shadow: $shadow-s;
             padding: $space-100 $space-150;
+
+            &__content {
+                color: $color-white;
+                font-family: $font-family-main;
+                line-height: $line-height-250;
+                font-size: $font-size-300;
+            }
         }
 
         .tooltip-arrow {
@@ -238,7 +260,10 @@ export default {
             &.tooltip {
                 .tooltip-inner {
                     @include inset-squish-space($space-200);
-                    font-size: $font-size-200;
+
+                    &__content {
+                        font-size: $font-size-200;
+                    }
                 }
             }
         }
@@ -246,7 +271,24 @@ export default {
             &.tooltip {
                 .tooltip-inner {
                     @include inset-squish-space($space-300);
-                    font-size: $font-size-300;
+
+                    &__content {
+                        font-size: $font-size-300;
+                    }
+                }
+            }
+        }
+    }
+
+    &--lines-limit {
+        &.tooltip {
+            .tooltip-inner {
+                &__content {
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: var(--tooltip-content-max-lines);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
             }
         }