mediacube-ui 0.1.122 → 0.1.124

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.124](https://github.com/MediaCubeCo/mcui/compare/v0.1.123...v0.1.124) (2023-08-24)
+
+### [0.1.123](https://github.com/MediaCubeCo/mcui/compare/v0.1.122...v0.1.123) (2023-08-23)
+
 ### [0.1.122](https://github.com/MediaCubeCo/mcui/compare/v0.1.121...v0.1.122) (2023-08-22)
 
 ### [0.1.121](https://github.com/MediaCubeCo/mcui/compare/v0.1.120...v0.1.121) (2023-08-22)

package/package.json

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

package/src/assets/tokens/tokens.json

@@ -994,7 +994,7 @@
     },
     {
       "name": "$token-icon-sizes",
-      "value": "( 200: $size-200, 250: $size-250, 300: $size-300, 400: $size-400, 500: $size-500, 600: $size-600, 700: $size-700, 800: $size-800, 900: $size-900, 1000: $size-1000, )",
+      "value": "( 100: $size-100, 150: $size-150, 200: $size-200, 250: $size-250, 300: $size-300, 400: $size-400, 500: $size-500, 600: $size-600, 700: $size-700, 800: $size-800, 900: $size-900, 1000: $size-1000, )",
       "compiledValue": ""
     },
     {
@@ -1042,6 +1042,11 @@
       "value": "32px",
       "compiledValue": ""
     },
+    {
+      "name": "$space-450",
+      "value": "36px",
+      "compiledValue": ""
+    },
     {
       "name": "$space-500",
       "value": "40px",
@@ -1074,7 +1079,7 @@
     },
     {
       "name": "$token-spaces",
-      "value": "( 50: $space-50, /* Additional token */ 100: $space-100, 150: $space-150, /* Additional token */ 200: $space-200, 250: $space-250, /* Additional token */ 300: $space-300, 400: $space-400, 500: $space-500, 600: $space-600, 700: $space-700, 800: $space-800, 900: $space-900, 1000: $space-1000, )",
+      "value": "( 50: $space-50, /* Additional token */ 100: $space-100, 150: $space-150, /* Additional token */ 200: $space-200, 250: $space-250, /* Additional token */ 300: $space-300, 400: $space-400, 450: $space-450, /* Additional token */ 500: $space-500, 600: $space-600, 700: $space-700, 800: $space-800, 900: $space-900, 1000: $space-1000, )",
       "compiledValue": ""
     },
     {
@@ -1092,14 +1097,19 @@
       "value": "100",
       "compiledValue": ""
     },
+    {
+      "name": "$z-index-overlay-page",
+      "value": "7000",
+      "compiledValue": ""
+    },
     {
       "name": "$z-index-modal",
-      "value": "9999",
+      "value": "8000",
       "compiledValue": ""
     },
     {
       "name": "$z-index-top-line",
-      "value": "9999",
+      "value": "8000",
       "compiledValue": ""
     },
     {

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

@@ -1,13 +1,22 @@
 <template>
-    <div class="mc-field-select" :class="classes" :style="styles" ref="field">
+    <div ref="field" class="mc-field-select" :class="classes" :style="styles">
         <div :for="name" class="mc-field-select__header">
             <!-- @slot Слот заголовка -->
             <slot name="header">
-                <mc-title v-if="title" :ellipsis="false" max-width="100%" weight="medium">{{ computedTitle }}</mc-title>
+                <mc-title v-if="hasTitle" :ellipsis="false" max-width="100%" weight="medium">{{
+                    computedTitle
+                }}</mc-title>
             </slot>
         </div>
         <div class="mc-field-select__main">
-            <multi-select v-bind="tagBind" @input="handleChange" @tag="handleTag" @search-change="handleSearchChange">
+            <multi-select
+                :ref="key"
+                v-bind="tagBind"
+                @input="handleChange"
+                @tag="handleTag"
+                @search-change="handleSearchChange"
+                @open="repositionDropDown"
+            >
                 <template slot="singleLabel" slot-scope="{ option }">
                     <mc-preview v-if="optionWithPreview" class="option__desc" size="l">
                         <mc-svg-icon slot="left" :name="option.icon" size="400" />
@@ -285,10 +294,18 @@ export default {
             type: String,
             default: null,
         },
+        /**
+         * Рендерить ли выпадающий список абсолютно, что бы помещался в ограниченном пространстве
+         * */
+        renderAbsoluteList: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
             searchValue: null,
+            key: `field_select_${Date.now()}`,
         }
     },
     computed: {
@@ -314,6 +331,9 @@ export default {
                 ...(this.groupKeys ? { groupValues: this.groupKeys.values } : {}),
             }
         },
+        hasTitle() {
+            return !!this.title
+        },
         /**
          * Если режим taggable && searchValueInOptions то добавлять введенный тег в опции
          * **/
@@ -387,6 +407,31 @@ export default {
         },
     },
     methods: {
+        repositionDropDown() {
+            if (!this.renderAbsoluteList) return
+            const { top, height, width, left } = this.$el.getBoundingClientRect()
+            const ref = this.$refs[this.key]
+
+            if (ref) {
+                ref.$refs.list.style.width = `${width}px`
+                ref.$refs.list.style.position = 'fixed'
+                ref.$refs.list.style.left = `${left}px`
+
+                const title_height = document.querySelector('.mc-field-select__header').offsetHeight
+                const title_margin = 8
+
+                switch (this.openDirection) {
+                    case 'top':
+                        ref.$refs.list.style.top = `${top + (this.hasTitle ? title_height + title_margin : 0) - 300}px`
+                        ref.$refs.list.style.bottom = 'auto'
+                        break
+                    case 'bottom':
+                        ref.$refs.list.style.bottom = 'auto'
+                        ref.$refs.list.style.top = `${top + height}px`
+                        break
+                }
+            }
+        },
         handleChange(value) {
             /**
              * Истинное значение инпута
@@ -611,6 +656,7 @@ $text-white: scale-color($color-white, $alpha: -10%);
             box-shadow: $shadow-s;
             overflow-y: auto;
             overflow-x: hidden;
+            max-height: 300px;
         }
 
         &--above {

package/src/elements/McTooltip/McTooltip.vue

@@ -28,7 +28,7 @@ export default {
          */
         placement: {
             type: String,
-            default: 'bottom',
+            default: 'top',
         },
         /**
          *  Цвет:
@@ -57,7 +57,7 @@ export default {
          */
         size: {
             type: String,
-            default: 'm',
+            default: 's',
         },
         /**
          *  Событие по отображению:

package/src/patterns/McOverlay/McOverlay.vue

@@ -0,0 +1,79 @@
+<template>
+    <section :class="classes" class="mc-overlay">
+        <section class="mc-overlay__spinner"></section>
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'McOverlay',
+    props: {
+        size: {
+            type: [String, Number],
+            default: 500,
+        },
+        backgroundColor: {
+            type: String,
+            default: 'white',
+        },
+    },
+    computed: {
+        classes() {
+            return {
+                [`mc-overlay--${this.size}`]: !!this.size,
+                [`mc-overlay--${this.backgroundColor}`]: !this.transparent,
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-overlay {
+    $block-name: &;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $z-index-overlay-page;
+    &__spinner {
+        display: block;
+        border: 2px solid $color-purple;
+        border-left-color: transparent;
+        border-radius: 50%;
+        animation: rotate 1.5s infinite linear;
+
+        width: var(--spinner-size);
+        min-width: var(--spinner-size);
+        height: var(--spinner-size);
+        min-height: var(--spinner-size);
+
+        @keyframes rotate {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+    @each $color, $value in $token-colors {
+        &--#{$color} {
+            @if $color != 'transparent' {
+                background-color: rgba($value, 0.85);
+            } @else {
+                background-color: $value;
+            }
+        }
+    }
+    @each $size, $value in $token-icon-sizes {
+        &--#{$size} {
+            --spinner-size: #{$value};
+        }
+    }
+}
+</style>

package/src/patterns/McTable/McTable/McTable.vue

@@ -48,6 +48,7 @@
                 <mc-title color="outline-gray">{{ placeholders.loading }}</mc-title>
             </div>
         </div>
+        <mc-overlay v-if="overlayLoading" size="700" />
     </div>
 </template>
 
@@ -59,6 +60,7 @@ import _isEmpty from 'lodash/isEmpty'
 import McTitle from '../../../elements/McTitle/McTitle'
 import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
 import McTableCol from '../McTableCol/McTableCol'
+import McOverlay from '../../McOverlay/McOverlay.vue'
 
 /**
  *  More info: https://xuliangzhan.com/vxe-table, https://xuliangzhan.github.io/vxe-table
@@ -69,6 +71,7 @@ export default {
         McTitle,
         McSvgIcon,
         McTableCol,
+        McOverlay,
     },
     provide() {
         const provideData = {}
@@ -155,6 +158,13 @@ export default {
             type: Boolean,
             default: false,
         },
+        /**
+         * Оверлей со спиннером
+         */
+        overlayLoading: {
+            type: Boolean,
+            default: false,
+        },
         /**
          *  По какому столбцу
          *  выполнена сортировка