mediacube-ui 0.1.113 → 0.1.116

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.116](https://github.com/MediaCubeCo/mcui/compare/v0.1.115...v0.1.116) (2023-08-17)
+
+### [0.1.115](https://github.com/MediaCubeCo/mcui/compare/v0.1.114...v0.1.115) (2023-08-16)
+
+### [0.1.114](https://github.com/MediaCubeCo/mcui/compare/v0.1.113...v0.1.114) (2023-08-16)
+
 ### [0.1.113](https://github.com/MediaCubeCo/mcui/compare/v0.1.112...v0.1.113) (2023-08-16)
 
 ### [0.1.112](https://github.com/MediaCubeCo/mcui/compare/v0.1.111...v0.1.112) (2023-08-16)

package/package.json

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

package/src/assets/icons.svg

@@ -12,6 +12,10 @@
             <rect width="20" height="15" fill="white" transform="translate(2 4)"/>
         </clipPath>
     
+<clipPath id="clip0_10761_44560">
+<rect width="20" height="15" fill="white" transform="translate(2 4)"/>
+</clipPath>
+
 <clipPath id="clip0_10494_49603">
 <rect width="24" height="24" fill="white"/>
 </clipPath>
@@ -1458,23 +1462,17 @@
         <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H22V6.57812H2V4ZM2 16.5H22V19H2V16.5Z" fill="#A51931"/>
     </g>
     
-</symbol><symbol id="flag_vi">
+</symbol><symbol id="flag_vi" viewBox="0 0 24 24">
+<g clip-path="url(#clip0_10761_44560)">
+<mask id="mask0_10761_44560" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="2" y="4" width="20" height="15">
+<path d="M2.00098 4H21.999V19H2.00098V4Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_10761_44560)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 4H23.25V19H0.75V4Z" fill="#EC0015"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7422 15.1621L12.1172 13.208L9.50977 15.1797L10.4766 11.9688L7.86914 9.98535L11.0947 9.95605L12.0967 6.75098L13.1133 9.94727L16.3389 9.9502L13.7461 11.9541L14.7393 15.165L14.7422 15.1621Z" fill="#FFFF00"/>
+</g>
+</g>
 
- <g>
-  <g stroke="null" id="svg_1">
-   <path stroke="null" id="svg_2" fill="#DA251D" d="m-3.04441,2.56249l29.90382,0c1.00957,0.00486 1.8306,0.66519 1.8306,1.4712l0,15.69762c0,0.806 -0.82103,1.46634 -1.8306,1.4712l-29.90382,0c-1.00957,0 -1.8306,-0.66034 -1.8306,-1.46634l0,-15.70247c0,-0.806 0.82103,-1.46634 1.8306,-1.4712l0,0z" class="st0"/>
-   <path stroke="null" id="svg_3" fill="#FFFF00" d="m11.91054,8.08462l-1.44137,3.72551l2.9618,0.80634l-1.52043,-4.53186l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_4" fill="#FFFF00" d="m11.91054,8.08462l1.44137,3.72551l-2.9618,0.80634l1.52043,-4.53186l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_5" fill="#FFFF00" d="m16.3502,10.79455l-4.67076,0l0,2.61296l4.67076,-2.61296l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_6" fill="#FFFF00" d="m16.3502,10.79455l-3.77675,2.30165l-1.8306,-2.11283l5.60735,-0.18883l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_7" fill="#FFFF00" d="m14.6534,15.1733l-1.44137,-3.72551l-2.9618,0.80634l4.40317,2.91917l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_8" fill="#FFFF00" d="m14.6534,15.1733l-3.77675,-2.30165l1.8306,-2.11283l1.94615,4.41448l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_9" fill="#FFFF00" d="m7.47089,10.79455l4.67076,0l0,2.61296l-4.67076,-2.61296l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_10" fill="#FFFF00" d="m7.47089,10.79455l3.77675,2.30165l1.8306,-2.11283l-5.60735,-0.18883l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_11" fill="#FFFF00" d="m9.16769,15.1733l1.44137,-3.72551l2.9618,0.80634l-4.40317,2.91917l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-   <path stroke="null" id="svg_12" fill="#FFFF00" d="m9.16769,15.1733l3.77675,-2.30165l-1.8306,-2.11283l-1.94615,4.41448l0,0zm0,0l0,0l0,0l0,0z" class="st1"/>
-  </g>
- </g>
 </symbol><symbol id="fly_dollar" viewBox="0 0 24 24">
 <path d="M23.7305 11.3262C22.0073 8.92112 18.4447 12.4607 11.9428 13.1801C9.53552 13.4461 7.36646 15.3723 4.57003 15.1887C3.42343 15.1133 1.82233 11.9523 0.623675 12.4562C0.00699442 12.7158 -0.275985 13.5823 0.358049 14.2333L7.39782 22.282C7.39782 22.282 7.75555 22.6772 8.96088 22.4035C9.25788 22.4872 13.7228 20.7728 16.3043 17.3406C16.9223 16.5189 17.6592 15.8346 18.422 15.2629C20.8987 13.5082 23.591 12.8968 23.591 12.8968C23.9354 12.6244 24.0162 12.3347 23.9975 12.0834C24.0202 11.6639 23.7305 11.3262 23.7305 11.3262Z" fill="#218321"/>
 <path d="M7.53588 6.97545C4.94703 10.3899 0.413302 12.0074 0.413302 12.0074C-0.432538 12.6883 0.281909 13.4909 0.281909 13.4909L7.42502 21.5288C7.42502 21.5288 7.78224 21.9301 8.9853 21.6517C8.9853 21.6517 13.519 20.0375 16.1072 16.623C18.7754 13.1045 23.587 11.9937 23.587 11.9937C24.4322 11.3128 23.7184 10.5089 23.7184 10.5089L16.5753 2.47229C16.5753 2.47229 16.2181 2.07036 15.015 2.34742C15.015 2.34742 10.2041 3.45565 7.53588 6.97545Z" fill="#A7D28B"/>

package/src/elements/McField/McFieldSelect/McFieldSelect.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="mc-field-select" :class="classes" :style="styles" ref="field">
-        <div :for="name" class="mc-field-select__header" :class="{ required }">
+        <div :for="name" class="mc-field-select__header">
             <!-- @slot Слот заголовка -->
             <slot name="header">
-                <mc-title v-if="title" :ellipsis="false" max-width="100%" weight="medium">{{ title }}</mc-title>
+                <mc-title v-if="title" :ellipsis="false" max-width="100%" weight="medium">{{ computedTitle }}</mc-title>
             </slot>
         </div>
         <div class="mc-field-select__main">
@@ -335,6 +335,9 @@ export default {
                 'mc-field-select--max-height': this.maxHeight,
             }
         },
+        computedTitle() {
+            return `${this.title}${this.required ? ' *' : ''}`
+        },
         styles() {
             return {
                 '--max-height': this.maxHeight,
@@ -449,17 +452,6 @@ $text-white: scale-color($color-white, $alpha: -10%);
         &:empty {
             display: none;
         }
-        &.required {
-            * {
-                display: inline;
-            }
-            & > * {
-                &::after {
-                    content: '*';
-                    position: absolute;
-                }
-            }
-        }
     }
 
     &__footer {
@@ -532,16 +524,11 @@ $text-white: scale-color($color-white, $alpha: -10%);
         }
 
         &__select {
-            overflow: hidden;
-            height: $size-300;
-            width: $size-300;
-            top: $space-100;
-            right: $space-100;
+            height: $size-500 - 2px;
             &::before {
                 direction: ltr;
                 width: 0;
                 height: 0;
-                top: 80%;
                 border-left: 5px solid transparent;
                 border-right: 5px solid transparent;
                 border-bottom: 5px solid transparent;
@@ -872,11 +859,6 @@ $text-white: scale-color($color-white, $alpha: -10%);
 }
 html[direction='rtl'] {
     .mc-field-select {
-        &__header {
-            &.required {
-                text-align: right;
-            }
-        }
         &__single-label {
             @include child-indent-right(0);
             @include child-indent-left-rtl($space-50);

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

@@ -1,9 +1,9 @@
 <template>
     <div ref="field" class="mc-field-text" :class="classes">
-        <label :for="name" class="mc-field-text__header" :class="{ required }">
+        <label :for="name" class="mc-field-text__header">
             <!-- @slot Слот заголовка -->
             <slot name="header">
-                <mc-title v-if="title" :ellipsis="false" max-width="100%" weight="medium">{{ title }}</mc-title>
+                <mc-title v-if="title" :ellipsis="false" max-width="100%" weight="medium">{{ computedTitle }}</mc-title>
             </slot>
         </label>
         <div class="mc-field-text__inner">
@@ -379,7 +379,9 @@ export default {
                 'mc-field-text--rtl': ['ar'].includes(this.locale),
             }
         },
-
+        computedTitle() {
+            return `${this.title}${this.required ? ' *' : ''}`
+        },
         isMaskVisible() {
             return this.mask || this.maskOptions || this.prettyType === 'date'
         },
@@ -696,17 +698,6 @@ export default {
         &:empty {
             display: none;
         }
-        &.required {
-            * {
-                display: inline;
-            }
-            & > * {
-                &::after {
-                    content: '*';
-                    position: absolute;
-                }
-            }
-        }
     }
 
     &__inner {
@@ -873,12 +864,6 @@ export default {
 }
 html[direction='rtl'] {
     .mc-field-text {
-        &__header {
-            &.required {
-                text-align: right;
-            }
-        }
-
         &__char-counter {
             right: unset;
             left: $space-150;