mediacube-ui 0.1.345 → 0.1.347

package/src/elements/McTitle/McTitle.vue

@@ -1,365 +0,0 @@
-<script>
-import _upperFirst from 'lodash/upperFirst'
-import DOMPurify from 'isomorphic-dompurify'
-
-const values = ['variation', 'weight']
-const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl']
-const variationProps = {}
-
-values.forEach(value => {
-    sizes.forEach(size => {
-        variationProps[`${value}-${size}`] = { type: String }
-    })
-})
-export default {
-    name: 'McTitle',
-    functional: true,
-    props: {
-        ...variationProps,
-        /**
-         * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
-         */
-        variation: {
-            type: String,
-            default: 'body',
-        },
-        /**
-         * В одну строку с точками в конце, если не вмещается
-         */
-        ellipsis: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Если нужен другой тэг
-         */
-        tagName: {
-            type: String,
-            default: 'div',
-        },
-        /**
-         * Заглавные буквы
-         */
-        uppercase: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Цвет
-         */
-        color: {
-            type: String,
-            default: 'black',
-        },
-        /**
-         *  Позиция текста:
-         *  `left, center, right`
-         */
-        textAlign: {
-            type: String,
-            default: 'left',
-        },
-        /**
-         * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
-         */
-        lineHeight: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Толщина текста:
-         * normal, medium, semi-bold
-         */
-        weight: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Если нужно указать свою
-         * максимальную ширину
-         */
-        maxWidth: {
-            type: String,
-            default: '',
-        },
-        preLine: {
-            type: Boolean,
-            default: false,
-        },
-        nowrap: {
-            type: Boolean,
-            default: false,
-        },
-        plainText: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    render(h, { props, slots, data, listeners }) {
-        let contentStyle = {}
-        if (props.maxWidth) {
-            contentStyle = { 'max-width': props.maxWidth }
-        }
-        const contentOptions = {
-            class: 'mc-title__text',
-            style: contentStyle,
-            is: props.tagName,
-        }
-        if (data.domProps && data.domProps.innerHTML) {
-            contentOptions.domProps = {
-                innerHTML: DOMPurify.sanitize(data.domProps.innerHTML),
-            }
-        }
-        const responsivePropsClasses = {}
-        responsivePropsClasses[`mc-title--variation-${props.variation}`] = props.variation
-        values.forEach(value => {
-            sizes.forEach(size => {
-                const sizeValue = props[`${value}${_upperFirst(size)}`]
-                responsivePropsClasses[`mc-title--${value}-${size}-${sizeValue}`] = sizeValue
-            })
-        })
-        const classes = {
-            'mc-title': true,
-            ['mc-title--ellipsis']: props.ellipsis,
-            [`mc-title--text-align-${props.textAlign}`]: props.textAlign,
-            [`mc-title--pre-line`]: props.preLine,
-            [`mc-title--nowrap`]: props.nowrap,
-            'mc-title--uppercase': props.uppercase,
-            'mc-title--line-height': props.lineHeight,
-            'mc-title--weight': props.weight,
-            'mc-title--plain-text': props.plainText,
-            ...(data.class || {}),
-            ...responsivePropsClasses,
-        }
-
-        if (data.staticClass) {
-            const staticClasses = data.staticClass.split(' ')
-            staticClasses.forEach(c => {
-                if (c) {
-                    classes[c] = true
-                }
-            })
-        }
-        let style = {}
-        if (props.color) style['--mc-title-color'] = `var(--color-${props.color})`
-        if (props.weight) style['--mc-title-weight'] = `var(--font-weight-${props.weight})`
-        if (props.lineHeight) style['--mc-title-line-height'] = `var(--line-height-${props.lineHeight})`
-        if (data.staticStyle) {
-            style = {
-                ...data.staticStyle,
-            }
-        }
-        return h(
-            'div',
-            {
-                attrs: {
-                    id: data.attrs?.id,
-                },
-                class: classes,
-                style,
-                on: listeners,
-            },
-            [slots()['icon-prepend'], h('component', contentOptions, slots()['default']), slots()['icon-append']],
-        )
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-@import '../../tokens/font-families';
-@import '../../tokens/letter-spacings';
-.mc-title {
-    $block-name: &;
-    --mc-title-color: initial;
-    --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;
-    display: inline-flex;
-    max-width: 100%;
-    width: 100%;
-    text-decoration: none;
-    //@include child-indent-right($space-50);
-
-    &__text {
-        padding-bottom: 1px; // fix overflow
-        margin-bottom: -1px; // fix overflow
-    }
-
-    > *:not(:empty):not(:last-child) {
-        margin-inline-end: $space-50;
-    }
-
-    .mc-svg-icon,
-    .mc-button {
-        @include reset-text-indents();
-    }
-
-    &--pre-line {
-        #{$block-name}__text {
-            white-space: pre-line !important;
-            word-break: normal;
-        }
-    }
-
-    &--nowrap {
-        #{$block-name}__text {
-            white-space: nowrap;
-        }
-    }
-
-    &--variation {
-        @include variations;
-    }
-
-    &--ellipsis {
-        align-items: center;
-
-        #{$block-name} {
-            &__text {
-                @include ellipsis($display: inline-block);
-                @include layout-flex-fix();
-            }
-        }
-    }
-
-    &--uppercase {
-        text-transform: uppercase;
-        letter-spacing: $letter-spacing-m;
-    }
-    &--plain-text {
-        #{$block-name} {
-            &__text {
-                unicode-bidi: plaintext;
-            }
-        }
-    }
-
-    &--text-align {
-        &-left {
-            justify-content: flex-start;
-            text-align: start;
-        }
-        &-center {
-            justify-content: center;
-            text-align: center;
-        }
-        &-right {
-            justify-content: flex-end;
-            text-align: end;
-        }
-    }
-    &--line-height {
-        line-height: var(--mc-title-line-height);
-    }
-    &--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;
-                }
-            }
-        }
-    }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        font-weight: inherit;
-        font-style: inherit;
-        font-size: inherit;
-        line-height: inherit;
-        margin-block-start: 0;
-        margin-block-end: 0;
-    }
-}
-</style>

package/src/elements/McTooltip/McTooltip.vue

@@ -1,334 +0,0 @@
-<template>
-    <div ref="tooltipTarget" v-tooltip="tooltipProps" class="mc-tooltip-target" @mouseenter.stop="handleHide">
-        <!-- @slot Слот для элемента, у которого будет всплывать тултип -->
-        <slot />
-    </div>
-</template>
-
-<script>
-import { VTooltip } from 'v-tooltip'
-
-VTooltip.options.defaultBoundariesElement = 'window'
-
-export default {
-    name: 'McTooltip',
-    directives: {
-        tooltip: VTooltip,
-    },
-    props: {
-        /**
-         *  Текст подсказки:
-         */
-        content: {
-            type: String,
-            required: true,
-        },
-        /**
-         *  Расположение:
-         */
-        placement: {
-            type: String,
-            default: 'top',
-        },
-        /**
-         *  Цвет:
-         */
-        color: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Максимальная ширина
-         */
-        maxWidth: {
-            type: String,
-            default: 's',
-        },
-        /**
-         *  Отключить стрелку
-         */
-        arrowDisabled: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         *  Размеры:
-         *  `s, m`
-         */
-        size: {
-            type: String,
-            default: 's',
-        },
-        /**
-         *  Событие по отображению:
-         *  'hover', 'click', 'focus' or 'manual'
-         *  (можно комбинировать)
-         */
-        trigger: {
-            type: String,
-            default: 'hover focus',
-        },
-        /**
-         *  Ручное отображение
-         */
-        show: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         *  В каком контенере отображать
-         */
-        container: {
-            default: 'body', //Boolean, String, HTMLElement,
-        },
-        maxLines: {
-            type: Number,
-            default: null,
-        },
-    },
-    computed: {
-        tooltipProps() {
-            return {
-                content: this.content,
-                placement: this.placement,
-                classes: this.tooltipClasses,
-                trigger: this.trigger,
-                show: this.show,
-                container: this.container,
-                template: `<div class="tooltip" style="${this.tooltipVariables}" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"><div class="tooltip-inner__content"></div></div> </div>`,
-                innerSelector: '.tooltip-inner__content',
-            }
-        },
-        tooltipClasses() {
-            return [
-                'mc-tooltip',
-                `mc-tooltip--width-${this.maxWidth}`,
-                `mc-tooltip--size-${this.size}`,
-                this.maxLines ? 'mc-tooltip--lines-limit' : '',
-                this.arrowDisabled ? 'mc-tooltip--arrow-disabled' : '',
-            ]
-        },
-        tooltipVariables() {
-            let textColor
-            if (this.color === 'white') textColor = 'black'
-
-            const variables = [
-                this.maxLines && `--mc-tooltip-content-max-lines: ${this.maxLines}`,
-                this.color && `--mc-tooltip-arrow-color: var(--color-${this.color})`,
-                textColor && `--mc-tooltip-color: var(--color-${textColor})`,
-                this.color && `--mc-tooltip-background-color: var(--color-${this.color})`,
-            ].filter(i => i)
-
-            return variables.join('; ')
-        },
-    },
-    methods: {
-        handleHide() {
-            setTimeout(() => {
-                const tooltipID = this.$refs.tooltipTarget?.getAttribute('aria-describedby')
-                const tooltips = document.documentElement.querySelectorAll('.tooltip.mc-tooltip')
-                tooltips.forEach(tooltip => {
-                    tooltip.style.visibility = tooltip.id === tooltipID ? 'visible' : 'hidden'
-                })
-            }, 1)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-@import '../../styles/spacing';
-@import '../../tokens/durations';
-@import '../../tokens/font-families';
-@import '../../tokens/box-shadows';
-.mc-tooltip-target {
-    display: inline-flex;
-}
-
-.mc-tooltip {
-    $arrow-size: $space-100 - 1;
-    $arrow-position: $arrow-size - 2; // наслаивает стрелку на тултип и прячет рандомные бордеры между ними
-    --mc-tooltip-arrow-color: #{$color-black};
-    --mc-tooltip-color: #{$color-white};
-    --mc-tooltip-background-color: #{$color-black};
-    --mc-tooltip-content-max-lines: initial;
-    &.tooltip {
-        display: block !important;
-        z-index: 10005 !important;
-
-        .tooltip-inner {
-            @include inset-squish-space($space-300);
-            background: $color-black;
-            border-radius: $radius-100;
-            box-shadow: $shadow-s;
-            padding: $space-100 $space-150;
-            background-color: var(--mc-tooltip-background-color);
-            &__content {
-                color: var(--mc-tooltip-color);
-                font-family: $font-family-main;
-                line-height: $line-height-250;
-                font-size: $font-size-300;
-            }
-        }
-
-        .tooltip-arrow {
-            @include size(0);
-            border-style: solid;
-            position: absolute;
-            margin: $arrow-size;
-            border-color: var(--mc-tooltip-arrow-color);
-            z-index: 1;
-        }
-
-        &[x-placement^='top'] {
-            margin-bottom: $arrow-size;
-
-            .tooltip-arrow {
-                border-width: $arrow-size $arrow-size 0 $arrow-size;
-                border-left-color: transparent !important;
-                border-right-color: transparent !important;
-                border-bottom-color: transparent !important;
-                bottom: -$arrow-position;
-                left: calc(50% - #{$arrow-size});
-                margin-top: -1px !important;
-                margin-bottom: 0;
-            }
-        }
-
-        &[x-placement^='bottom'] {
-            margin-top: $arrow-size;
-
-            .tooltip-arrow {
-                border-width: 0 $arrow-size $arrow-size $arrow-size;
-                border-left-color: transparent !important;
-                border-right-color: transparent !important;
-                border-top-color: transparent !important;
-                top: -$arrow-position;
-                left: calc(50% - #{$arrow-size});
-                margin-top: 0;
-                margin-bottom: 0;
-            }
-        }
-
-        &[x-placement^='right'] {
-            margin-left: $arrow-size;
-
-            .tooltip-arrow {
-                border-width: $arrow-size $arrow-size $arrow-size 0;
-                border-left-color: transparent !important;
-                border-top-color: transparent !important;
-                border-bottom-color: transparent !important;
-                left: -$arrow-position;
-                top: calc(50% - #{$arrow-size});
-                margin-left: 0;
-                margin-right: 0;
-            }
-        }
-
-        &[x-placement^='left'] {
-            margin-right: $arrow-size;
-
-            .tooltip-arrow {
-                border-width: $arrow-size 0 $arrow-size $arrow-size;
-                border-top-color: transparent !important;
-                border-right-color: transparent !important;
-                border-bottom-color: transparent !important;
-                right: -$arrow-position;
-                top: calc(50% - #{$arrow-size});
-                margin-left: 0;
-                margin-right: 0;
-            }
-        }
-
-        &[aria-hidden='true'] {
-            visibility: hidden !important;
-            opacity: 0;
-            transition: opacity $duration-s;
-        }
-
-        &[aria-hidden='false'] {
-            visibility: visible !important;
-            opacity: 1;
-            transition: opacity $duration-s;
-        }
-    }
-
-    &--width-xs {
-        &.tooltip {
-            max-width: 180px;
-        }
-    }
-
-    &--width-s {
-        &.tooltip {
-            max-width: 250px;
-        }
-    }
-
-    &--width-m {
-        &.tooltip {
-            max-width: 320px;
-        }
-    }
-
-    &--width-l {
-        &.tooltip {
-            max-width: 380px;
-        }
-    }
-
-    &--width-xl {
-        &.tooltip {
-            max-width: 500px;
-        }
-    }
-
-    &--size {
-        &-s {
-            &.tooltip {
-                .tooltip-inner {
-                    @include inset-squish-space($space-200);
-
-                    &__content {
-                        font-size: $font-size-200;
-                    }
-                }
-            }
-        }
-        &-m {
-            &.tooltip {
-                .tooltip-inner {
-                    @include inset-squish-space($space-300);
-
-                    &__content {
-                        font-size: $font-size-300;
-                    }
-                }
-            }
-        }
-    }
-
-    &--lines-limit {
-        &.tooltip {
-            .tooltip-inner {
-                &__content {
-                    display: -webkit-box;
-                    -webkit-box-orient: vertical;
-                    -webkit-line-clamp: var(--mc-tooltip-content-max-lines);
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-            }
-        }
-    }
-
-    &--arrow-disabled {
-        &.tooltip {
-            .tooltip-arrow {
-                display: none;
-            }
-        }
-    }
-}
-</style>

package/src/helpers/consts.js

@@ -1,3 +0,0 @@
-export const LANGUAGES = {
-    rtl: ['ar'],
-}