mediacube-ui 0.1.347 → 0.1.349

package/src/tokens/colors.scss

@@ -0,0 +1,82 @@
+/**
+ * @tokens Colors
+ * @presenter Color
+ */
+//neutral colors
+$color-black: #202427; /* Цвет основного текста */
+$color-dark-gray: #5C6670; /* Иконки, доп.текст, менее активные эл-ты */
+$color-gray: #8F99A3; /* Для плашек, хорошо держит форму */
+$color-outline-gray: #C7CCD1; /* Для обводок */
+$color-outline-light: #DEE0E2; /* Для обводок */
+$color-light-gray: #F3F5F7; /* Для бэкграунда картинок */
+$color-hover-gray: #EDF0F3; /* Ховеры и неактивные эл-ты */
+$color-bg-gray: #F5F6Fa; /* Бэкграунд */
+$color-white: #FFFFFF; /* Основной фон */
+//main colors
+$color-hover-purple: #7238FF; /* Кнопки, ссылки, выделение активных элементов */
+$color-purple: #8756FF; /* Кнопки, ссылки, выделение активных элементов и иконки */
+$color-light-purple: #CBB7FF; /* Текст на accent purple */
+$color-lighter-purple: #EEE8FF; /* Выбранные элементы */
+$color-bg-purple: #9673ED; /* Цвет для бэкграунда */
+$color-primary-bg: #F5F6Fa; /* Цвет основного фона */
+//additional colors
+$color-hover-blue: #0A54C2; /* Альтернатива – Кнопки, ссылки, выделение активных элементов */
+$color-blue: #2578F4; /* Альтернатива – Кнопки, ссылки, выделение активных элементов и иконки */
+$color-light-blue: #92BBFA; /* Альтернатива – Текст на accent blue */
+$color-lighter-blue: #E1EDFF; /* Альтернатива – Выбранные элементы */
+
+$color-dark-orange: #BD8400; /* Кнопки, статус данных */
+$color-orange: #FCB100; /* Кнопки, статус данных */
+$color-yellow: #FFC60A;
+$color-dark-red: #D5260B; /* Красные кнопки отмены */
+$color-bright-pink: #e8178a; /* Promo color */
+$color-red: #F5563D; /* Красные кнопки отмены */
+$color-pale-pink: #FC9283;
+$color-dark-green: #218321; /* Цифры и положительные действия */
+$color-green: #4DCB4D; /* Зелёные кнопки */
+$color-toxic: #E8F443; /* Кнопки, статус данных */
+
+$color-ultraviolet: #C41CFD; /* Статус данных */
+$color-pinkish: #F073B1; /* Статус данных */
+$color-azure: #0A85C2; /* Статус данных */
+
+$color-turquoise: #4EA9A2; /* Нотификации вверху страницы */
+$color-darken-turquoise: #2F8C99; /* Кастомные тултипы */
+
+$color-transparent: transparent; /* Прозрачный фон */
+
+$token-colors: (
+        "purple": $color-purple,
+        "hover-purple": $color-hover-purple,
+        "light-purple": $color-light-purple,
+        "bg-purple": $color-bg-purple,
+        "lighter-purple": $color-lighter-purple,
+        "black": $color-black,
+        "outline-light": $color-outline-light,
+        "dark-gray": $color-dark-gray,
+        "gray": $color-gray,
+        "outline-gray": $color-outline-gray,
+        "hover-gray": $color-hover-gray,
+        "bg-gray": $color-bg-gray,
+        "white": $color-white,
+        "hover-blue": $color-hover-blue,
+        "blue": $color-blue,
+        "light-blue": $color-light-blue,
+        "lighter-blue": $color-lighter-blue,
+        "dark-orange": $color-dark-orange,
+        "orange": $color-orange,
+        "yellow": $color-yellow,
+        "dark-red": $color-dark-red,
+        "red": $color-red,
+        "bright-pink": $color-bright-pink,
+        "pale-pink": $color-pale-pink,
+        "dark-green": $color-dark-green,
+        "green": $color-green,
+        "toxic": $color-toxic,
+        "ultraviolet": $color-ultraviolet,
+        "pinkish": $color-pinkish,
+        "azure": $color-azure,
+        "turquoise": $color-turquoise,
+        "darken-turquoise": $color-darken-turquoise,
+        "transparent": $color-transparent,
+);

package/src/tokens/durations.scss

@@ -0,0 +1,7 @@
+/**
+  * @tokens Durations
+  */
+
+$duration-s: 150ms;
+$duration-m: 300ms;
+$duration-l: 500ms;

package/src/tokens/easings.scss

@@ -0,0 +1,6 @@
+/**
+ * @tokens Easings
+ * @presenter Easing
+ */
+
+$easing-swift: cubic-bezier(0.55, 0, 0.1, 1);

package/src/tokens/font-families.scss

@@ -0,0 +1,8 @@
+/**
+ * @tokens Font Families
+ * @presenter FontFamily
+ */
+
+$font-family-main: 'Inter', sans-serif;
+$font-family-additional: 'Source Serif Pro', serif;
+

package/src/tokens/font-sizes.scss

@@ -0,0 +1,23 @@
+/**
+  * @tokens Font Sizes
+  * @presenter FontSize
+  */
+
+$font-size-100: 10px;
+$font-size-200: 13px;
+$font-size-300: 16px;
+$font-size-400: 20px;
+$font-size-500: 28px;
+$font-size-600: 32px;
+$font-size-700: 48px;
+
+$token-font-sizes: (
+  "100": $font-size-100,
+  "200": $font-size-200,
+  "300": $font-size-300,
+  "400": $font-size-400,
+  "500": $font-size-500,
+  "600": $font-size-600,
+  "700": $font-size-700,
+);
+

package/src/tokens/font-weights.scss

@@ -0,0 +1,9 @@
+/**
+ * @tokens Font Weights
+ * @presenter FontWeight
+ */
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;

package/src/tokens/gradients.scss

@@ -0,0 +1,19 @@
+/**
+  * @tokens Gradients
+  * @presenter Gradient
+  */
+$gradient-pink: linear-gradient(180deg, #F5576C 0%, #F093FB 100%); /* Фирменный цвет личного кабинета */
+$gradient-violet: linear-gradient(180deg, #E41AFE 0%, #8035F8 100%); /* Столбики в графике 5 порядка */
+$gradient-blue: linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%); /* Нотификации и столбики в графике 4 порядка */
+$gradient-yellow: linear-gradient(180deg, #FEE41A 0%, #F89B35 100%); /* Столбики в графике 3 порядка */
+$gradient-green: linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%); /* Столбики в графике 2 порядка */
+$gradient-red: linear-gradient(180deg, #F26567 0%, #F79440 100%); /* Столбики в графике 1 порядка */
+$gradient-purple: linear-gradient(270deg, #9a47ed 0%, #8446ff 100%); /* Основной градиент для MCPay */
+$gradient-purple-pink: linear-gradient(90deg, #722eff 2%, #fe6ffc 100%); /*Градиент промоакции*/
+$gradient-blue-purple: linear-gradient(90deg, #18bfe3 20%, #8756ff 70%); /*Градиент промоакции*/
+$gradient-dark-blue: linear-gradient(90deg, #5550EF 0%, #7F4EFF 100%); /*Градиент автоплатежей*/
+$gradient-light-blue: linear-gradient(277.29deg, #d6e8ff 5.67%, #efe9ff 94.33%); /*Градиент новых криптовалют*/
+$gradient-purple-blue: linear-gradient(272.54deg, #18bfe3 17.19%, #8756ff 70.31%); /*Градиент баннера для криптовалют*/
+
+$gradient-primary-radial: radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244)); /* Radial gradient example */
+

package/src/tokens/letter-spacings.scss

@@ -0,0 +1,6 @@
+/**
+  * @tokens Letter Spacing
+  * @presenter Spacing
+  */
+$letter-spacing-m: 0.4px;
+$letter-spacing-l: 1px;

package/src/tokens/line-heights.scss

@@ -0,0 +1,22 @@
+/**
+ * @tokens Line Heights
+ * @presenter LineHeight
+ */
+
+$line-height-150: 12px; /* Additional token */
+$line-height-200: 16px;
+$line-height-250: 20px; /* Additional token */
+$line-height-300: 24px;
+$line-height-400: 32px;
+$line-height-500: 40px;
+$line-height-600: 48px;
+
+$token-line-heights: (
+  150: $line-height-150,
+  200: $line-height-200,
+  250: $line-height-250,
+  300: $line-height-300,
+  400: $line-height-400,
+  500: $line-height-500,
+  600: $line-height-600,
+);

package/src/tokens/media-queries.scss

@@ -0,0 +1,32 @@
+/**
+ * @tokens Media Queries
+ * @presenter Spacing
+ */
+
+$media-query-xs: "(min-width: 375px)";
+$media-query-s: "(min-width: 480px)";
+$media-query-m: "(min-width: 768px)";
+$media-query-l: "(min-width: 1024px)";
+$media-query-xl: "(min-width: 1440px)";
+
+$media-query-xs-down: "(max-width: 374px)";
+$media-query-s-down: "(max-width: 479px)";
+$media-query-m-down: "(max-width: 767px)";
+$media-query-l-down: "(max-width: 1023px)";
+$media-query-xl-down: "(max-width: 1439px)";
+
+$media-desktop: "(hover: hover) and (pointer: fine)";
+$media-mobile: "(hover: none) and (pointer: coarse)";
+
+$token-media-queries: (
+  "xs": $media-query-xs,
+  "s": $media-query-s,
+  "m": $media-query-m,
+  "l": $media-query-l,
+  "xl": $media-query-xl,
+  "xs-down": $media-query-xs-down,
+  "s-down": $media-query-s-down,
+  "m-down": $media-query-m-down,
+  "l-down": $media-query-l-down,
+  "xl-down": $media-query-xl-down,
+);

package/src/tokens/opacities.scss

@@ -0,0 +1,8 @@
+/**
+  * @tokens Opacities
+  * @presenter Opacity
+  */
+$opacity-disabled: 0.6;
+$opacity-active: 0.7;
+$opacity-hover: 0.8;
+

package/src/tokens/sizes.scss

@@ -0,0 +1,47 @@
+/**
+* @tokens Sizes
+* @presenter Spacing
+*/
+
+$size-50: 4px; /* Additional token */
+$size-100: 8px;
+$size-150: 12px; /* Additional token */
+$size-200: 16px;
+$size-250: 20px; /* Additional token */
+$size-300: 24px;
+$size-400: 32px;
+$size-500: 40px;
+$size-550: 44px; /* Additional token */
+$size-600: 48px;
+$size-700: 56px;
+$size-800: 64px;
+$size-900: 72px;
+$size-1000: 80px;
+
+$token-avatar-sizes: (
+  300: $size-300,
+  400: $size-400,
+  500: $size-500,
+  600: $size-600,
+  700: $size-700,
+  800: $size-800,
+  900: $size-900,
+  1000: $size-1000,
+);
+
+$token-icon-sizes: (
+  50: $size-50,
+  100: $size-100,
+  150: $size-150,
+  200: $size-200,
+  250: $size-250,
+  300: $size-300,
+  400: $size-400,
+  500: $size-500,
+  550: $size-550,
+  600: $size-600,
+  700: $size-700,
+  800: $size-800,
+  900: $size-900,
+  1000: $size-1000,
+);

package/src/tokens/spacings.scss

@@ -0,0 +1,38 @@
+/**
+ * @tokens Spacings
+ * @presenter Spacing
+ */
+
+$space-zero: 0;
+$space-50: 4px; /* Additional token */
+$space-100: 8px;
+$space-150: 12px; /* Additional token */
+$space-200: 16px;
+$space-250: 20px; /* Additional token */
+$space-300: 24px;
+$space-350: 28px; /* Additional token */
+$space-400: 32px;
+$space-450: 36px; /* Additional token */
+$space-500: 40px;
+$space-600: 48px;
+$space-700: 56px;
+$space-800: 64px;
+$space-900: 72px;
+$space-1000: 80px;
+
+$token-spaces: (
+  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,
+);

package/src/tokens/z-indexes.scss

@@ -0,0 +1,14 @@
+/**
+ * @tokens Z-Index
+ */
+
+$z-index-sticky-tabs: 49;
+$z-index-dropdown: 100;
+$z-index-sticky: 100;
+$z-index-overlay-page: 7000;
+$z-index-modal: 8000;
+$z-index-top-line: 8000;
+$z-index-header: 10000;
+$z-index-notification: 10001;
+$z-index-overlay: 10002;
+$z-index-toasted: 10003;

package/src/utils/dayjs.js

@@ -0,0 +1,19 @@
+import dayjs from 'dayjs'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import 'dayjs/locale/en'
+
+// EN have direct import
+const dayjsLocales = {
+    en: () => Promise.resolve(),
+    es: () => import('dayjs/locale/es'),
+    pt: () => import('dayjs/locale/pt'),
+    th: () => import('dayjs/locale/th'),
+    ru: () => import('dayjs/locale/ru'),
+    vi: () => import('dayjs/locale/vi'),
+}
+
+dayjs.extend(timezone)
+dayjs.extend(utc)
+
+export { dayjs, dayjsLocales }

package/src/utils/filters.js

@@ -0,0 +1,11 @@
+import numeral from 'numeral'
+
+export const number = (value, decimals = 2) => {
+    if (value == null) return null
+
+    let deciamlsString = ''.padStart(decimals, '0')
+
+    return numeral(value)
+        .format('0,0.' + deciamlsString)
+        .replace(/,/g, ' ')
+}

package/src/utils/getTokens.js

@@ -0,0 +1,41 @@
+import tokens from '../assets/tokens/tokens.json'
+
+const getTokenValue = name => {
+    const tokenData = tokens.variables.find(v => v.name === name)
+    return tokenData.value
+}
+
+const getTokensByType = type => {
+    const filteredTokens = tokens.variables.filter(v => {
+        const regExp = new RegExp(`^\\$${type}-`)
+        return regExp.test(v.name)
+    })
+    const tokenList = {}
+    filteredTokens.forEach(t => {
+        const key = t.name.replace(`$${type}-`, '')
+        tokenList[key] = key
+    })
+    return tokenList
+}
+
+const getTokenGroup = name => {
+    const dataTokens = tokens.variables.find(v => v.name === `$token-${name}`)
+    let tokenList = {}
+    if (!dataTokens) return tokenList
+
+    if ('mapValue' in dataTokens) {
+        dataTokens.mapValue.forEach(t => (tokenList[t.name] = t.name))
+        return tokenList
+    }
+
+    const valueArr = dataTokens.value.replace(/\/\*.+\*\/\s/, '').split(' ')
+    valueArr.forEach(i => {
+        if (i.match(/.+:$/)) {
+            const key = i.slice(0, i.length - 1)
+            tokenList[key] = key
+        }
+    })
+    return tokenList
+}
+
+export { getTokensByType, getTokenGroup, getTokenValue }

package/src/utils/load-icons.js

@@ -0,0 +1,3 @@
+const svgIconsReq = require.context('!!raw-loader!../assets/icons', true, /.\.svg$/)
+const svgIcons = svgIconsReq.keys().map(name => ({ name, content: svgIconsReq(name).default }))
+export default svgIcons

package/src/utils/treeSearch.js

@@ -0,0 +1,30 @@
+export const findParentComponent = ($component, name) => {
+    let $parent = null
+    do {
+        if (!$component) {
+            return null
+        }
+        let $componentParent = $component.$parent
+        if ($componentParent && $componentParent.$options.name === name) {
+            $parent = $componentParent
+        } else {
+            $component = $componentParent
+        }
+    } while ($parent == null)
+    return $parent
+}
+
+export const findChildrenComponents = ($component, name) => {
+    if ($component.$children == null || $component.$children.length === 0) return []
+
+    let $collapses = []
+    $component.$children.forEach($child => {
+        if ($child.$options.name === name) {
+            $collapses = [...$collapses, $child]
+        } else {
+            $collapses = [...$collapses, ...findChildrenComponents($child, name)]
+        }
+    })
+
+    return $collapses
+}

package/src/utils/webFontLoader.js

@@ -0,0 +1,12 @@
+/**
+ * Web Font Loader takes care of Vue Design System’s font loading.
+ * For full documentation, see: https://github.com/typekit/webfontloader
+ */
+import WebFont from 'webfontloader'
+
+WebFont.load({
+    custom: {
+        families: ['Font Awesome 5 Icons:400,900', 'Font Awesome 5 Brands:400'],
+        urls: ['https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css'],
+    },
+})