mediacube-ui 0.1.346 → 0.1.348

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.346",
+  "version": "0.1.348",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,
   "homepage": "https://mediacube.co",
   "license": "MIT",
-  "main": "dist/mediacube-ui.common.js",
+  "main": "dist/mediacube-ui.umd.js",
   "files": [
     "src/assets/fonts",
     "src/assets/img",
@@ -23,14 +23,14 @@
     "src/main.js"
   ],
   "scripts": {
-    "start": "yarn scss-export && start-storybook -p 6006 -s public",
+    "start": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
-    "serve": "yarn scss-export && vue-cli-service serve",
-    "build": "yarn scss-export && vue-cli-service build --target lib --inline-vue",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "scss-export": "sass-export src/tokens/*.scss -o src/assets/tokens/tokens.json",
-    "release": "node createsvgsprite.js && standard-version"
+    "release": "node createsvgsprite.js && standard-version",
+    "build:lib": "webpack --config webpack.config.js"
   },
   "husky": {
     "hooks": {
@@ -65,6 +65,9 @@
     "webfontloader": "^1.6.28",
     "xe-utils": "2.7.2"
   },
+  "peerDependencies": {
+    "vue": "^2.6.11"
+  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-optional-chaining": "^7.12.7",
@@ -97,13 +100,13 @@
     "eslint-loader": "^4.0.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^6.2.0",
     "husky": "^4.3.0",
     "jest-vue-preprocessor": "^1.7.1",
     "lint-staged": "^10.5.1",
     "node-sass": "^4.14.1",
     "numeral": "^2.0.6",
     "prettier": "^1.19.1",
-    "sass-export": "^1.0.8",
     "sass-loader": "^8.0.2",
     "sass-resources-loader": "^2.0.3",
     "standard-version": "^8.0.0",
@@ -116,6 +119,8 @@
     "vue-slider-component": "^3.2.2",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
+    "webpack": "4.x",
+    "webpack-cli": "3.x",
     "xe-clipboard": "^1.9.0"
   }
 }

package/src/assets/tokens/tokens.json

@@ -686,6 +686,11 @@
       "value": "linear-gradient(277.29deg, #d6e8ff 5.67%, #efe9ff 94.33%)",
       "compiledValue": "linear-gradient(277.29deg, #d6e8ff 5.67%, #efe9ff 94.33%)"
     },
+    {
+      "name": "$gradient-purple-blue",
+      "value": "linear-gradient(272.54deg, #18bfe3 17.19%, #8756ff 70.31%)",
+      "compiledValue": "linear-gradient(272.54deg, #18bfe3 17.19%, #8756ff 70.31%)"
+    },
     {
       "name": "$gradient-primary-radial",
       "value": "radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244))",

package/src/elements/McAvatar/McAvatar.vue

@@ -188,6 +188,8 @@ export default {
 <style lang="scss">
 @import '../../styles/mixins';
 @import '../../tokens/durations';
+@import '../../tokens/colors';
+@import '../../tokens/spacings';
 $color-borders: $token-colors;
 $dot-colors: $token-colors;
 

package/src/elements/McBadge/McBadge.vue

@@ -97,6 +97,11 @@ export default {
 @import '../../styles/mixins';
 @import '../../tokens/font-families';
 @import '../../tokens/letter-spacings';
+@import '../../tokens/colors';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-weights';
+@import '../../tokens/spacings';
 .mc-badge {
     $block-name: &;
     --mc-badge-color: #{$color-white};

package/src/elements/McButton/McButton.vue

@@ -50,6 +50,7 @@ export default {
          *  Если нужна ссылка внутри приложения:
          * `{name: 'test', params: { id: test.id }}`
          */
+        // eslint-disable-next-line vue/require-prop-types
         to: {
             default: null,
         },
@@ -57,6 +58,7 @@ export default {
          *  Если нужна обычная ссылка:
          * `https://mediacube.agency/`
          */
+        // eslint-disable-next-line vue/require-prop-types
         href: {
             default: null,
         },
@@ -422,6 +424,13 @@ export default {
 @import '../../tokens/font-families';
 @import '../../tokens/letter-spacings';
 @import '../../tokens/animations';
+@import '../../tokens/colors';
+@import '../../tokens/font-weights';
+@import '../../tokens/media-queries';
+@import '../../tokens/sizes';
+@import '../../tokens/spacings';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-sizes';
 .mc-button {
     $block-name: &;
     @include reset();

package/src/elements/McChip/McChip.vue

@@ -123,6 +123,11 @@ export default {
 @import '../../styles/mixins';
 @import '../../tokens/durations';
 @import '../../tokens/font-families';
+@import '../../tokens/colors';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/spacings';
+@import '../../tokens/sizes';
 .mc-chip {
     $block-name: &;
     --mc-chip-text-color: #{$color-black};
@@ -292,7 +297,7 @@ export default {
             color: $color-black;
             &:before {
                 background-color: var(--mc-chip-color);
-                opacity: 0.10;
+                opacity: 0.1;
             }
         }
     }

package/src/elements/McCropper/McCropper.vue

@@ -77,6 +77,8 @@ export default {
 <style lang="scss">
 @import '../../tokens/border-radius';
 @import '../../tokens/opacities';
+@import '../../tokens/colors';
+@import '../../tokens/media-queries';
 .mc-cropper {
     $block-name: &;
 

package/src/elements/McDate/McDate.vue

@@ -35,6 +35,7 @@ export default {
         /**
          *  Формат даты
          */
+        // eslint-disable-next-line vue/require-prop-types
         format: {
             default: 'DD.MM.YYYY',
         },
@@ -90,6 +91,7 @@ export default {
 <style lang="scss">
 @import '../../styles/mixins';
 @import '../../tokens/font-families';
+@import '../../tokens/spacings';
 .mc-date {
     $block-name: &;
 

package/src/elements/McDatePicker/McDatePicker.vue

@@ -188,6 +188,7 @@ export default {
         /**
          *  Значение
          */
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: null,
         },
@@ -403,8 +404,8 @@ export default {
                 return this.useFormat || (!this.setDefaultToday && !this.value)
                     ? this.value
                     : this.value
-                        ? new Date(this.value)
-                        : new Date()
+                    ? new Date(this.value)
+                    : new Date()
             }
             const formattingDate = date =>
                 dayjs.tz(dayjs.utc(date, 'YYYY-MM-DD HH:mm:ss'), this.currentTimezone).format(this.format)
@@ -584,6 +585,13 @@ export default {
 @import '../../styles/mixins';
 @import '../../tokens/font-families';
 @import '../../tokens/box-shadows';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
+@import '../../tokens/sizes';
+@import '../../tokens/font-sizes';
+@import '../../tokens/font-weights';
+@import '../../tokens/line-heights';
+@import '../../tokens/media-queries';
 .mc-date-picker {
     $block-name: &;
 

package/src/elements/McField/McFieldCheckbox/McFieldCheckbox.vue

@@ -68,6 +68,7 @@ export default {
          *  Значение
          *
          */
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: null,
         },
@@ -85,6 +86,7 @@ export default {
          *  Выбранное значение
          *
          */
+        // eslint-disable-next-line vue/require-prop-types
         checkedValue: {
             default: true,
         },
@@ -93,6 +95,7 @@ export default {
          *  Невыбранное значение
          *
          */
+        // eslint-disable-next-line vue/require-prop-types
         uncheckedValue: {
             default: false,
         },
@@ -223,6 +226,10 @@ export default {
 
 <style lang="scss">
 @import '../../../styles/mixins';
+@import '../../../tokens/spacings';
+@import '../../../tokens/line-heights';
+@import '../../../tokens/font-sizes';
+@import '../../../tokens/colors';
 .mc-field-checkbox {
     $block-name: &;
     position: relative;

package/src/elements/McField/McFieldRadio/McFieldRadioButton/McFieldRadioButton.vue

@@ -33,6 +33,7 @@ export default {
         /**
          *  Значение
          */
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: null,
         },
@@ -152,6 +153,11 @@ export default {
 
 <style lang="scss">
 @import '../../../../styles/mixins';
+@import '../../../../tokens/sizes';
+@import '../../../../tokens/spacings';
+@import '../../../../tokens/font-sizes';
+@import '../../../../tokens/line-heights';
+@import '../../../../tokens/colors';
 .mc-field-radio-button {
     $block-name: &;
     display: inline-block;

package/src/elements/McField/McFieldRadio/McFieldRadioGroup/McFieldRadioGroup.vue

@@ -48,6 +48,7 @@ export default {
         /**
          *  Значение
          */
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: null,
         },
@@ -157,6 +158,9 @@ export default {
 
 <style lang="scss">
 @import '../../../../styles/mixins';
+@import '../../../../tokens/spacings';
+@import '../../../../tokens/sizes';
+@import '../../../../tokens/line-heights';
 .mc-field-radio-group {
     $block-name: &;
 

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

@@ -249,6 +249,7 @@ export default {
         /**
          *  Значение
          */
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: null,
         },

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

@@ -62,6 +62,7 @@
                     <mc-button v-if="copy" variation="black-link" size="m-compact" @click.prevent="handlerCopy(value)">
                         <mc-svg-icon slot="icon-append" name="copy" />
                     </mc-button>
+                    <!-- eslint-disable-next-line -->
                     <component v-bind="passwordTooltipProps">
                         <mc-button
                             v-if="isPassword"
@@ -205,6 +206,7 @@ export default {
          *  Значение
          *
          */
+        // eslint-disable-next-line vue/require-prop-types
         value: {
             default: null,
         },
@@ -595,6 +597,7 @@ export default {
             if (number_types.includes(this.type)) value = value?.replace(',', '.')
             switch (this.type) {
                 case 'num': {
+                    //eslint-disable-next-line
                     let [num] = /-?\d*[\.]?\d*/.exec(String(value)) || []
                     num = this.setDecimalsLimit(num)
                     num = this.removeLeadingZero(num)
@@ -644,6 +647,7 @@ export default {
                     break
                 }
                 case 'password':
+                    //eslint-disable-next-line
                     const cursor_position = this.getCaretPos(e.target)?.start
                     value = value?.replace(/ /gm, '')
                     e.target.value = value
@@ -675,8 +679,8 @@ export default {
             this.$emit('keydown', e)
         },
         formattedToNumber(value) {
-            const [first] =
-                /-?\d*[\.]?\d*/.exec(
+            //eslint-disable-next-line
+            const [first] = /-?\d*[\.]?\d*/.exec(
                     String(value)
                         ?.replace(/ /gm, '')
                         ?.trim(),
@@ -719,9 +723,8 @@ export default {
         getAmountFormat(value) {
             const formatted_number = this.formattedToNumber(value)
             const has_fraction = !!String(formatted_number)?.match(/\./)
-
-            const [int, fraction] = String(formatted_number)
-                .replace(/[^\d\.-]/g, '')
+            //eslint-disable-next-line
+            const [int, fraction] = String(formatted_number).replace(/[^\d\.-]/g, '')
                 .replace(/\B(?=(?:\d{3})+(?!\d))/g, ' ')
                 .split('.')
 
@@ -786,6 +789,11 @@ export default {
 @import '../../../styles/mixins';
 @import '../../../tokens/durations';
 @import '../../../tokens/font-families';
+@import '../../../tokens/spacings';
+@import '../../../tokens/sizes';
+@import '../../../tokens/colors';
+@import '../../../tokens/line-heights';
+@import '../../../tokens/font-sizes';
 .mc-field-text {
     $block-name: &;
     display: block;

package/src/elements/McField/McFieldToggle/McFieldToggle.vue

@@ -155,6 +155,11 @@ export default {
 <style lang="scss">
 @import '../../../styles/mixins';
 @import '../../../tokens/durations';
+@import '../../../tokens/colors';
+@import '../../../tokens/font-sizes';
+@import '../../../tokens/line-heights';
+@import '../../../tokens/spacings';
+@import '../../../tokens/sizes';
 .mc-field-toggle {
     $block-name: &;
     $toggle-indent: calc(#{$space-50} / 2);

package/src/elements/McNotification/McNotification.vue

@@ -127,6 +127,12 @@ export default {
 
 <style lang="scss">
 @import '../../styles/mixins';
+@import '../../tokens/colors';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/sizes';
+@import '../../tokens/spacings';
+@import '../../tokens/media-queries';
 .mc-notification {
     $block-name: &;
     --mc-notification-color: #{$color-orange};

package/src/elements/McProgress/McProgress.vue

@@ -154,6 +154,11 @@ export default {
 <style lang="scss">
 @import '../../tokens/border-radius';
 @import '../../tokens/font-families';
+@import '../../tokens/colors';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-sizes';
+@import '../../tokens/sizes';
+@import '../../tokens/spacings';
 .mc-progress {
     $block-name: &;
     --mc-progress-color: #{$color-dark-gray};

package/src/elements/McRangeSlider/McRangeSlider.vue

@@ -147,6 +147,10 @@ export default {
 
 <style lang="scss">
 @import '../../tokens/box-shadows';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-sizes';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
 .mc-range-slider {
     $block-name: &;
     --mc-range-slider-color: #{$color-purple};

package/src/elements/McSvgIcon/McSvgIcon.vue

@@ -100,6 +100,7 @@ export default {
 
 <style lang="scss">
 @import '../../styles/mixins';
+@import '../../tokens/sizes';
 .mc-svg-icon {
     --mc-svg-icon-size: #{$size-250};
     --mc-svg-icon-weight: 1.5;

package/src/elements/McTabs/McTab/McTab.vue

@@ -31,6 +31,7 @@ export default {
         /**
          *  Имя таба
          */
+        // eslint-disable-next-line vue/require-prop-types
         name: {
             required: true,
         },
@@ -104,6 +105,7 @@ export default {
          *  Если нужна ссылка внутри приложения:
          * `{name: 'test', params: { id: test.id }}`
          */
+        // eslint-disable-next-line vue/require-prop-types
         to: {
             default: null,
         },

package/src/elements/McTabs/McTabs/McTabs.vue

@@ -73,9 +73,11 @@ export default {
             type: Number,
             default: 0,
         },
+        // eslint-disable-next-line vue/require-prop-types
         useUrlFragment: {
             default: false,
         },
+        // eslint-disable-next-line vue/require-prop-types
         defaultTabHash: {
             default: null,
         },
@@ -372,6 +374,11 @@ export default {
 @import '../../../styles/mixins';
 @import '../../../tokens/z-indexes';
 @import '../../../tokens/font-families';
+@import '../../../tokens/colors';
+@import '../../../tokens/font-sizes';
+@import '../../../tokens/line-heights';
+@import '../../../tokens/font-weights';
+@import '../../../tokens/spacings';
 .mc-tabs {
     $block-name: &;
 

package/src/elements/McTitle/McTitle.vue

@@ -169,6 +169,11 @@ export default {
 @import '../../styles/mixins';
 @import '../../tokens/font-families';
 @import '../../tokens/letter-spacings';
+@import '../../tokens/font-sizes';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-weights';
+@import '../../tokens/spacings';
+@import '../../tokens/media-queries';
 .mc-title {
     $block-name: &;
     --mc-title-color: initial;

package/src/elements/McTooltip/McTooltip.vue

@@ -78,6 +78,7 @@ export default {
         /**
          *  В каком контенере отображать
          */
+        // eslint-disable-next-line vue/require-prop-types
         container: {
             default: 'body', //Boolean, String, HTMLElement,
         },
@@ -142,6 +143,10 @@ export default {
 @import '../../tokens/durations';
 @import '../../tokens/font-families';
 @import '../../tokens/box-shadows';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-sizes';
 .mc-tooltip-target {
     display: inline-flex;
 }

package/src/helpers/storybookFunctions.js

@@ -1,6 +1,5 @@
 import { getTokensByType } from '../utils/getTokens'
 
-
 export function setVariationsByColor(keys = []) {
     let variations = {}
     const colors = getTokensByType('color')

package/src/patterns/McCells/McCell/McCell.vue

@@ -62,6 +62,7 @@ export default {
 
 <style lang="scss">
 @import '../../../styles/mixins';
+@import '../../../tokens/spacings';
 .mc-cell {
     $block-name: &;
     @include reset-text-indents();

package/src/patterns/McChat/McChat.vue

@@ -262,6 +262,7 @@ export default {
 
 <style lang="scss">
 @import '../../styles/mixins';
+@import '../../tokens/spacings';
 .slideout-panel .slideout-wrapper .slideout {
     height: auto;
 }

package/src/patterns/McChat/McChatComment/McChatComment.vue

@@ -26,7 +26,7 @@
                 v-html="filteredComment"
             />
             <mc-title v-if="comment.message" slot="bottom" :ellipsis="false" pre-line class="mc-chat-comment__message"
-              >{{ comment.message }}
+                >{{ comment.message }}
             </mc-title>
             <mc-button
                 v-if="canEdit"
@@ -125,6 +125,7 @@ export default {
             return nl2br ? nl2br(this.commentWithLinks) : this.commentWithLinks
         },
         commentWithLinks() {
+            //eslint-disable-next-line
             const regExp = /((http|https):\/\/)?(([0-9a-zA-Zа-яА-Я.-]*)\.([a-zA-Zа-яА-Я]+[^\s,.;:'"\])]+)(\/[^ ,.;\/\])]*)?)/gi
             return this.comment.content.replace(regExp, match => {
                 const url = /^http/.test(match) ? match : `http://${match}`
@@ -165,6 +166,8 @@ export default {
 
 <style lang="scss">
 @import '../../../styles/mixins';
+@import '../../../tokens/spacings';
+@import '../../../tokens/colors';
 .mc-chat-comment {
     $block-name: &;
     --mc-chat-comment-color: initial;

package/src/patterns/McChat/McChatForm/McChatForm.vue

@@ -114,6 +114,9 @@ export default {
 
 <style lang="scss">
 @import '../../../styles/mixins';
+@import '../../../tokens/line-heights';
+@import '../../../tokens/spacings';
+@import '../../../tokens/sizes';
 .mc-chat-form {
     $block-name: &;
     line-height: $line-height-200;

package/src/patterns/McCollapse/McCollapse.vue

@@ -162,6 +162,8 @@ export default {
 <style lang="scss">
 @import '../../styles/mixins';
 @import '../../tokens/durations';
+@import '../../tokens/colors';
+@import '../../tokens/spacings';
 .mc-collapse {
     $block-name: &;
 

package/src/patterns/McDrawer/McDrawer.vue

@@ -83,6 +83,10 @@ export default {
 
 <style lang="scss">
 @import '../../styles/mixins';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
+@import '../../tokens/sizes';
+@import '../../tokens/media-queries';
 .mc-drawer {
     $block-name: &;
 

package/src/patterns/McDropdown/McDropdown.vue

@@ -151,6 +151,8 @@ export default {
 @import '../../styles/mixins';
 @import '../../tokens/z-indexes';
 @import '../../tokens/durations';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
 .mc-dropdown {
     $block-name: &;
 

package/src/patterns/McDropdown/McDropdownPanel/McDropdownPanel.vue

@@ -14,6 +14,10 @@ export default {
 <style lang="scss">
 @import '../../../styles/mixins';
 @import '../../../tokens/box-shadows';
+@import '../../../tokens/colors';
+@import '../../../tokens/spacings';
+@import '../../../tokens/font-weights';
+@import '../../../tokens/sizes';
 .mc-dropdown-panel {
     $block-name: &;
 

package/src/patterns/McFakeScroll/McFakeScroll.vue

@@ -214,6 +214,8 @@ export default {
 
 <style lang="scss">
 @import '../../styles/mixins';
+@import '../../tokens/media-queries';
+@import '../../tokens/colors';
 @mixin track-visibility() {
     right: 0;
     width: 7px;

package/src/patterns/McFilter/McFilterChip/McFilterChip.vue

@@ -61,6 +61,8 @@ export default {
 }
 </script>
 <style lang="scss">
+@import '../../../tokens/spacings';
+@import '../../../tokens/colors';
 .mc-filter-chip {
     $block-name: &;
     border-radius: $space-50;

package/src/patterns/McFilter/McFilterTags/McFilterTags.vue

@@ -340,6 +340,8 @@ export default {
 
 <style lang="scss">
 @import '../../../styles/mixins';
+@import '../../../tokens/spacings';
+@import '../../../tokens/colors';
 .mc-filter-tags {
     $block-name: &;
 

package/src/patterns/McFilter/McFilterTypeRange/McFilterTypeRange.vue

@@ -121,6 +121,7 @@ export default {
 
 <style lang="scss">
 @import '../../../styles/mixins';
+@import '../../../tokens/spacings';
 .mc-filter-type-range {
     $block-name: &;
     display: flex;