mediacube-ui 0.1.419 → 0.1.421

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.421](https://github.com/MediaCubeCo/mcui/compare/v0.1.420...v0.1.421) (2025-09-30)
+
+### [0.1.420](https://github.com/MediaCubeCo/mcui/compare/v0.1.419...v0.1.420) (2025-09-29)
+
 ### [0.1.419](https://github.com/MediaCubeCo/mcui/compare/v0.1.418...v0.1.419) (2025-09-25)
 
 ### [0.1.418](https://github.com/MediaCubeCo/mcui/compare/v0.1.417...v0.1.418) (2025-09-24)

package/package.json

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

package/src/elements/McSpinDigit/McSpinDigit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" :class="containerStyles.classes" :style="containerStyles.variables">
+    <div :id="id" :class="containerClasses" :style="containerStyles">
         <!-- фэйк цифра, нужно что бы устанавливать нужную ширину контейнера -->
         <span class="mc-spin-digit-container__target">{{ end }}</span>
         <div class="mc-spin-digit" :style="digitStyles">
@@ -10,25 +10,12 @@
     </div>
 </template>
 <script>
-const values = ['size', 'weight']
-const validators = {
-    size: v => ['100', '200', '300', '400', '500', '600', '700'].includes(v),
-    weight: v => ['normal', 'medium', 'semi-bold', 'bold'].includes(v),
-}
-
-const sizes = ['xs', 's', 'm', 'l', 'xl']
-const variationProps = {}
+import classAndStyleMixin from '../../mixins/classAndStyleMixin'
 
-values.forEach(value => {
-    const validator = validators[value]
-    sizes.forEach(size => {
-        variationProps[`${value}-${size}`] = { type: String, validator }
-    })
-})
 export default {
     name: 'McSpinDigit',
+    mixins: [classAndStyleMixin],
     props: {
-        ...variationProps,
         /**
          * min - 0, max - 9
          * */
@@ -47,16 +34,6 @@ export default {
             type: Number,
             default: 500,
         },
-        size: {
-            type: String,
-            default: '300',
-            validator: validators.size,
-        },
-        weight: {
-            type: String,
-            default: 'normal',
-            validator: validators.weight,
-        },
         color: {
             type: String,
             default: 'black',
@@ -75,26 +52,13 @@ export default {
                 transform: `translateY(-${this.offset * 100}%)`,
             }
         },
+        containerClasses() {
+            return this.getClassNames('mc-spin-digit-container', this.$props)
+        },
         containerStyles() {
-            const classes = {
-                'mc-spin-digit-container': true,
-            }
-            const variables = {
-                '--mc-spin-digit-font-size': `var(--font-size-${this.size}, var(--font-size-300))`,
-                '--mc-spin-digit-font-color': `var(--color-${this.color}, var(--color-black))`,
-                '--mc-spin-digit-font-weight': `var(--font-weight-${this.weight}, var(--font-weight-normal))`,
-                '--mc-spin-duration': `${this.duration}ms`,
-            }
-            Object.entries(this.$props).forEach(([key, value]) => {
-                if (key.startsWith('size') && key !== 'size' && value) {
-                    const suffix = key.replace('size', '').toLowerCase()
-                    value && (variables[`--mc-spin-digit-font-size-${suffix}`] = `var(--font-size-${value})`)
-                    classes[`mc-spin-digit-container--size-${suffix}`] = true
-                }
-            })
             return {
-                classes,
-                variables,
+                '--mc-spin-duration': `${this.duration}ms`,
+                ...this.getStyles('mc-spin-digit', this.$props),
             }
         },
     },
@@ -118,6 +82,12 @@ export default {
         },
         triggerSpin() {
             this.$emit('spin-start', this.start)
+            // делаем проверку, если duration = 0 то скипаем анимацию
+            if (!this.duration) {
+                this.offset = this.end
+                this.$emit('spin-end', this.end)
+                return
+            }
             this.spin_active = true
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
@@ -134,16 +104,16 @@ export default {
 </script>
 <style lang="scss">
 @import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
 @import '../../tokens/colors';
 @import '../../tokens/font-families';
 @import '../../tokens/font-weights';
 @import '../../tokens/media-queries';
+@import '../../styles/mixins';
 
 .mc-spin-digit-container {
     $block-name: &;
-    @each $key, $value in $token-font-sizes {
-        --font-size-#{$key}: #{$value};
-    }
+
     @each $key, $value in $token-colors {
         --color-#{$key}: #{$value};
     }
@@ -151,24 +121,28 @@ export default {
         --font-weight-#{$key}: #{$value};
     }
 
-    --mc-spin-digit-font-size: var(--font-size-300);
-    --mc-spin-digit-font-color: var(--color-black);
-    --mc-spin-digit-font-weight: var(--font-weight-normal);
+    --mc-spin-digit-color: var(--color-black);
+    --mc-spin-digit-weight: var(--font-weight-normal);
 
-    font-family: $font-family-main;
-    font-size: var(--mc-spin-digit-font-size);
-    font-weight: var(--mc-spin-digit-font-weight);
-    color: var(--mc-spin-digit-font-color);
-    overflow: hidden;
-    height: 1em;
     position: relative;
+    height: 1em;
+    font-family: $font-family-main;
+    font-size: inherit;
+    font-weight: var(--mc-spin-digit-weight);
+    color: var(--mc-spin-digit-color);
     line-height: 1;
+    overflow: hidden;
 
+    &--variation {
+        @include variations-title;
+    }
+    &--weight {
+        font-weight: var(--mc-spin-digit-weight);
+    }
     &__target {
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
         visibility: hidden;
+        font: inherit;
+        color: inherit;
     }
 
     .mc-spin-digit {
@@ -178,27 +152,20 @@ export default {
         display: flex;
         flex-direction: column;
         height: 100%;
+        font: inherit;
         color: inherit;
         will-change: transform;
         transition: transform var(--mc-spin-duration) cubic-bezier(0.4, 0, 0.2, 1);
 
         &__digit {
             height: 1em;
+            font: inherit;
             line-height: 1em;
-            font-size: inherit;
-            font-weight: inherit;
             color: inherit;
             text-align: center;
             flex-shrink: 0;
         }
     }
-
-    @each $key, $value in $token-media-queries {
-        @media #{$value} {
-            &--size-#{$key} {
-                font-size: var(--mc-spin-digit-font-size-#{$key}, var(--mc-spin-digit-font-size));
-            }
-        }
-    }
+    @include responsive-variations-title;
 }
 </style>

package/src/elements/McSpinNumber/McSpinNumber.vue

@@ -1,11 +1,6 @@
 <template>
-    <div :id="id" class="mc-spin-number-container">
-        <div
-            v-for="(digit, i) in currentTo"
-            :key="`mc-spin-number-${id}-${i}`"
-            :class="containerStyles.classes"
-            :style="containerStyles.variables"
-        >
+    <div :id="id" :class="computedClasses" :style="computedStyles">
+        <div v-for="(digit, i) in currentTo" :key="`mc-spin-number-${id}-${i}`" class="mc-spin-number__container">
             <template v-if="!Number.isFinite(digit)">
                 <span class="mc-spin-number__non-digit">
                     {{ currentTo[i] }}
@@ -16,11 +11,6 @@
                 v-bind="$props"
                 :start="+currentFrom[i]"
                 :end="+currentTo[i]"
-                :duration="duration"
-                :font-size="size"
-                :color="color"
-                :weight="weight"
-                class="mc-spin-number__digit"
                 @spin-end="actualizeNumbers"
             />
         </div>
@@ -29,28 +19,15 @@
 
 <script>
 import McSpinDigit from '../McSpinDigit/McSpinDigit'
-const values = ['size', 'weight']
-const validators = {
-    size: v => ['100', '200', '300', '400', '500', '600', '700'].includes(v),
-    weight: v => ['normal', 'medium', 'semi-bold', 'bold'].includes(v),
-}
-
-const sizes = ['xs', 's', 'm', 'l', 'xl']
-const variationProps = {}
+import classAndStyleMixin from '../../mixins/classAndStyleMixin'
 
-values.forEach(value => {
-    const validator = validators[value]
-    sizes.forEach(size => {
-        variationProps[`${value}-${size}`] = { type: String, validator }
-    })
-})
 export default {
     name: 'McSpinNumber',
     components: {
         McSpinDigit,
     },
+    mixins: [classAndStyleMixin],
     props: {
-        ...variationProps,
         start: {
             type: [Number, String],
             required: true,
@@ -63,16 +40,6 @@ export default {
             type: Number,
             default: 500,
         },
-        size: {
-            type: String,
-            default: '300',
-            validator: validators.size,
-        },
-        weight: {
-            type: String,
-            default: 'normal',
-            validator: validators.weight,
-        },
         color: {
             type: String,
         },
@@ -91,26 +58,11 @@ export default {
             const from = `000000000${String((this.current_from ?? this.start) || 0)}`.slice(-this.currentTo.length)
             return this.formatNumber(from)
         },
-        containerStyles() {
-            const classes = {
-                'mc-spin-number': true,
-            }
-            const variables = {
-                '--mc-spin-number-font-size': `var(--font-size-${this.size}, var(--font-size-300))`,
-                '--mc-spin-number-font-color': `var(--color-${this.color}, var(--color-black))`,
-                '--mc-spin-number-font-weight': `var(--font-weight-${this.weight}, var(--font-weight-normal))`,
-            }
-            Object.entries(this.$props).forEach(([key, value]) => {
-                if (key.startsWith('size') && key !== 'size' && value) {
-                    const suffix = key.replace('size', '').toLowerCase()
-                    value && (variables[`--mc-spin-number-font-size-${suffix}`] = `var(--font-size-${value})`)
-                    classes[`mc-spin-number--size-${suffix}`] = true
-                }
-            })
-            return {
-                classes,
-                variables,
-            }
+        computedClasses() {
+            return this.getClassNames('mc-spin-number', this.$props)
+        },
+        computedStyles() {
+            return this.getStyles('mc-spin-number', this.$props)
         },
     },
     methods: {
@@ -128,55 +80,49 @@ export default {
 
 <style lang="scss">
 @import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
 @import '../../tokens/colors';
 @import '../../tokens/font-families';
 @import '../../tokens/font-weights';
 @import '../../tokens/media-queries';
+@import '../../styles/mixins';
 
 .mc-spin-number {
     $block-name: &;
 
-    @each $key, $value in $token-font-sizes {
-        --font-size-#{$key}: #{$value};
-    }
     @each $key, $value in $token-colors {
         --color-#{$key}: #{$value};
     }
     @each $key, $value in $token-font-weights {
         --font-weight-#{$key}: #{$value};
     }
-    --mc-spin-number-font-size: var(--font-size-300);
-    --mc-spin-number-font-color: var(--color-black);
-    --mc-spin-number-font-weight: var(--font-weight-normal);
+    --mc-spin-number-color: var(--color-black);
+    --mc-spin-number-weight: var(--font-weight-normal);
 
     display: flex;
     align-items: center;
-    justify-content: center;
     font-family: $font-family-main;
-    font-size: var(--mc-spin-number-font-size);
-    font-weight: var(--mc-spin-number-font-weight);
+    font-weight: inherit;
     line-height: 1;
-    color: var(--mc-spin-number-font-color);
+    color: var(--mc-spin-number-color);
 
+    &--variation {
+        @include variations-title;
+    }
+    &--weight {
+        font-weight: var(--mc-spin-number-weight);
+    }
+    &__container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
     &__non-digit {
         display: inline-flex;
         min-width: 0.1em;
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
+        font: inherit;
         color: inherit;
     }
-
-    &-container {
-        display: flex;
-    }
-
-    @each $key, $value in $token-media-queries {
-        @media #{$value} {
-            &--size-#{$key} {
-                font-size: var(--mc-spin-number-font-size-#{$key}, var(--mc-spin-number-font-size));
-            }
-        }
-    }
+    @include responsive-variations-title;
 }
 </style>

package/src/elements/McTitle/McTitle.vue

@@ -175,75 +175,6 @@ export default {
     --mc-title-weight: initial;
     --mc-title-line-height: initial;
     color: var(--mc-title-color);
-    @mixin variations() {
-        font-family: $font-family-main;
-        &-h1 {
-            font-size: $font-size-700;
-            line-height: $line-height-600;
-            font-weight: $font-weight-semi-bold;
-            #{$block-name}__text {
-                max-width: 920px;
-            }
-        }
-        &-h2 {
-            font-size: $font-size-600;
-            line-height: $line-height-500;
-            font-weight: $font-weight-semi-bold;
-            #{$block-name}__text {
-                max-width: 820px;
-            }
-        }
-        &-h3 {
-            font-size: $font-size-500;
-            line-height: $line-height-400;
-            font-weight: $font-weight-semi-bold;
-            #{$block-name}__text {
-                max-width: 720px;
-            }
-        }
-        &-h4 {
-            font-size: $font-size-400;
-            line-height: $line-height-300;
-            font-weight: $font-weight-bold;
-            #{$block-name}__text {
-                max-width: 700px;
-            }
-        }
-
-        &-subtitle {
-            font-size: $font-size-300;
-            line-height: $line-height-250;
-            #{$block-name}__text {
-                max-width: 640px;
-            }
-        }
-        &-article {
-            font-size: $font-size-200;
-            line-height: $line-height-250;
-            #{$block-name}__text {
-                max-width: 536px;
-            }
-        }
-        &-info {
-            font-size: $font-size-300;
-            line-height: $line-height-300;
-        }
-        &-body {
-            font-size: $font-size-200;
-            line-height: $line-height-200;
-            #{$block-name}__text {
-                max-width: 330px;
-            }
-        }
-        &-overline {
-            font-size: $font-size-100;
-            line-height: $line-height-150;
-            font-weight: $font-weight-medium;
-            #{$block-name}__text {
-                max-width: 330px;
-            }
-        }
-    }
 
     margin-top: 0;
     margin-bottom: 0;
@@ -281,7 +212,7 @@ export default {
     }
 
     &--variation {
-        @include variations;
+        @include variations-title;
     }
 
     &--ellipsis {
@@ -327,27 +258,7 @@ export default {
     &--weight {
         font-weight: var(--mc-title-weight);
     }
-    @each $media, $value in $token-media-queries {
-        @media #{$value} {
-            &--variation-#{$media} {
-                @include variations;
-            }
-            &--weight-#{$media} {
-                &-normal {
-                    font-weight: $font-weight-normal;
-                }
-                &-medium {
-                    font-weight: $font-weight-medium;
-                }
-                &-semi-bold {
-                    font-weight: $font-weight-semi-bold;
-                }
-                &-bold {
-                    font-weight: $font-weight-bold;
-                }
-            }
-        }
-    }
+    @include responsive-variations-title;
     h1,
     h2,
     h3,

package/src/mixins/classAndStyleMixin.js

@@ -0,0 +1,55 @@
+import _upperFirst from 'lodash/upperFirst'
+const values = ['variation', 'weight']
+const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl']
+const validators = {
+    variation: v => ['h1', 'h2', 'h3', 'h4', 'subtitle', 'body', 'overline', 'article', 'info'].includes(v),
+    weight: v => ['normal', 'medium', 'semi-bold', 'bold'].includes(v),
+}
+const variationProps = {}
+values.forEach(value => {
+    const validator = validators[value]
+    sizes.forEach(size => {
+        variationProps[`${value}-${size}`] = { type: String, validator }
+    })
+})
+export default {
+    props: {
+        ...variationProps,
+        variation: {
+            type: String,
+            default: 'body',
+            validator: validators.variation,
+        },
+        weight: {
+            type: String,
+            validator: validators.weight,
+        },
+    },
+    methods: {
+        getClassNames(class_name, props = {}) {
+            const classes = {
+                [class_name]: true,
+                [`${class_name}--variation-${props.variation}`]: props.variation,
+                [`${class_name}--weight`]: !!props.weight,
+            }
+
+            values.forEach(value => {
+                sizes.forEach(size => {
+                    const sizeValue = props[`${value}${_upperFirst(size)}`]
+                    if (sizeValue) {
+                        classes[`${class_name}--${value}-${size}-${sizeValue}`] = true
+                    }
+                })
+            })
+
+            return Object.keys(classes).filter(key => classes[key])
+        },
+        getStyles(class_name, props = {}) {
+            const styles = {}
+            props.color && (styles[`--${class_name}-color`] = `var(--color-${props.color}, var(--color-black))`)
+            props.weight &&
+                (styles[`--${class_name}-weight`] = `var(--font-weight-${props.weight}, var(--font-weight-normal))`)
+            return styles
+        },
+    },
+}

package/src/styles/_mixins.scss

@@ -622,3 +622,66 @@
     margin-inline-start: $space;
   }
 }
+
+@mixin variations-title() {
+  font-family: $font-family-main;
+  &-h1 {
+    font-size: $font-size-700;
+    line-height: $line-height-600;
+    font-weight: $font-weight-semi-bold;
+  }
+  &-h2 {
+    font-size: $font-size-600;
+    line-height: $line-height-500;
+    font-weight: $font-weight-semi-bold;
+  }
+  &-h3 {
+    font-size: $font-size-500;
+    line-height: $line-height-400;
+    font-weight: $font-weight-semi-bold;
+  }
+  &-h4 {
+    font-size: $font-size-400;
+    line-height: $line-height-300;
+    font-weight: $font-weight-bold;
+  }
+
+  &-subtitle {
+    font-size: $font-size-300;
+    line-height: $line-height-250;
+  }
+  &-article {
+    font-size: $font-size-200;
+    line-height: $line-height-250;
+  }
+  &-info {
+    font-size: $font-size-300;
+    line-height: $line-height-300;
+  }
+  &-body {
+    font-size: $font-size-200;
+    line-height: $line-height-200;
+  }
+  &-overline {
+    font-size: $font-size-100;
+    line-height: $line-height-150;
+    font-weight: $font-weight-medium;
+  }
+}
+
+@mixin responsive-variations-title() {
+  @each $media, $value in $token-media-queries {
+    @media #{$value} {
+      &--variation-#{$media} {
+        @include variations-title;
+      }
+      &--weight-#{$media} {
+        @each $weight-name, $weight-value in $token-font-weights {
+          &-#{$weight-name} {
+            font-weight: $weight-value;
+          }
+        }
+      }
+    }
+  }
+}