mediacube-ui 0.1.345 → 0.1.347

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

@@ -1,268 +0,0 @@
-<template>
-    <div class="mc-field-toggle__content">
-        <label :class="classes" :style="styles">
-            <span class="mc-field-toggle__text">
-                <!-- @slot Слот для тайтла тогглера -->
-                <slot />
-            </span>
-            <span class="mc-field-toggle__wrapper">
-                <input v-bind="inputProps" @input="e => change(e.target.checked)" />
-                <span class="mc-field-toggle__slider"></span>
-            </span>
-        </label>
-        <mc-title v-if="errorText" tag-name="div" color="red" variation="overline" max-width="100%" :ellipsis="false">
-            {{ errorText }}
-        </mc-title>
-    </div>
-</template>
-
-<script>
-import fieldErrors from '../../../mixins/fieldErrors'
-import McTitle from '../../McTitle/McTitle'
-
-export default {
-    name: 'McFieldToggle',
-    components: {
-        McTitle,
-    },
-    mixins: [fieldErrors],
-    props: {
-        /**
-         *  Значение
-         *
-         */
-        value: {
-            type: [Boolean, String, Number],
-            default: null,
-        },
-        /**
-         *  Выбранное значение
-         */
-        checkedValue: {
-            type: [Boolean, String, Number],
-            default: true,
-        },
-        /**
-         *  Невыбранное значение
-         */
-        uncheckedValue: {
-            type: [Boolean, String, Number],
-            default: false,
-        },
-        /**
-         *  Изменение цвета текста
-         *  при переключении
-         */
-        coloredText: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         *  Отключенное состояние
-         */
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         *  Позиция текста
-         *  относительно переключателя
-         */
-        textPosition: {
-            type: String,
-            default: 'left',
-        },
-        /**
-         * Активный цвет
-         */
-        color: {
-            type: String,
-            default: 'purple',
-        },
-
-        /**
-         *  Ошибки
-         *
-         */
-        errors: {
-            type: Array,
-            default: null,
-        },
-
-        /**
-         * Атрибут tabindex для главного элемента
-         */
-
-        tabindex: {
-            type: [String, Number],
-        },
-    },
-    computed: {
-        _value() {
-            return this.value === this.checkedValue
-        },
-        classes() {
-            return {
-                'mc-field-toggle': true,
-                'mc-field-toggle--checked': this._value,
-                'mc-field-toggle--disabled': this.disabled,
-                'mc-field-toggle--colored-text': this.coloredText,
-                [`mc-field-toggle--text-position-${this.textPosition}`]: this.textPosition,
-            }
-        },
-        styles() {
-            let disabledColor
-            let saturateValue
-            switch (this.color) {
-                case 'purple': {
-                    disabledColor = 'light-purple'
-                    break
-                }
-                default: {
-                    disabledColor = this.color
-                    saturateValue = '50%'
-                }
-            }
-            return {
-                '--mc-field-toggle-color': this.color && `var(--color-${this.color})`,
-                '--mc-field-toggle-disabled-color': disabledColor && `var(--color-${disabledColor})`,
-                '--mc-field-toggle-saturate-value': saturateValue,
-            }
-        },
-        inputProps() {
-            return {
-                checked: this._value,
-                disabled: this.disabled,
-                tabindex: this.tabindex,
-                class: 'mc-field-toggle__field',
-                type: 'checkbox',
-            }
-        },
-    },
-    methods: {
-        change(checked) {
-            this.toggleErrorVisible()
-            /**
-             * Событие тоггла
-             * @property {boolean}
-             */
-            this.$emit('input', checked ? this.checkedValue : this.uncheckedValue)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-@import '../../../tokens/durations';
-.mc-field-toggle {
-    $block-name: &;
-    $toggle-indent: calc(#{$space-50} / 2);
-    --mc-field-toggle-color: initial;
-    --mc-field-disabled-color: initial;
-    --mc-field-toggle-saturate-value: initial;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &__text {
-        color: $color-black;
-        transition: color $duration-m;
-        line-height: $line-height-200;
-        font-size: $font-size-200;
-        margin-inline-end: $space-100;
-        text-align: right;
-
-        &:empty {
-            margin-inline-end: 0;
-        }
-    }
-
-    &--colored-text {
-        #{$block-name}__text {
-            color: $color-gray;
-        }
-
-        @at-root #{$block-name}--checked#{$block-name}--colored-text {
-            #{$block-name}__text {
-                color: $color-purple;
-            }
-        }
-        @at-root #{$block-name}--disabled#{$block-name}--colored-text {
-            #{$block-name}__text {
-                color: $color-outline-gray;
-            }
-        }
-        @at-root #{$block-name}--checked#{$block-name}--disabled#{$block-name}--colored-text {
-            #{$block-name}__text {
-                color: $color-light-purple;
-            }
-        }
-    }
-
-    &--text-position-right {
-        #{$block-name}__text {
-            order: 2;
-            margin-inline: $space-100 0;
-            text-align: left;
-        }
-    }
-    &__content {
-        @include child-indent-bottom($space-50);
-    }
-
-    &__wrapper {
-        position: relative;
-        display: inline-block;
-        @include size($size-550, $size-250);
-        flex-shrink: 0;
-        & > #{$block-name}__field {
-            opacity: 0;
-            @include size(0);
-
-            &:checked + #{$block-name}__slider {
-                background-color: $color-purple;
-
-                &:before {
-                    inset-inline-start: calc(#{$space-300} + #{$toggle-indent});
-                }
-            }
-        }
-
-        #{$block-name}__slider {
-            @include position(absolute, 0 0 0 0);
-            background-color: $color-gray;
-            transition: $duration-m;
-            border-radius: 100px;
-
-            &::before {
-                @include pseudo();
-                @include size($size-200);
-                @include position(null, null null $toggle-indent $toggle-indent);
-                background-color: $color-white;
-                transition: $duration-m;
-                border-radius: $radius-circle;
-            }
-        }
-    }
-
-    &--disabled {
-        cursor: auto;
-        #{$block-name}__slider {
-            background-color: $color-outline-gray !important;
-            &::before {
-                background-color: $color-hover-gray;
-            }
-        }
-    }
-    #{$block-name}__wrapper > #{$block-name}__field:checked + #{$block-name}__slider {
-        background-color: var(--mc-field-toggle-color);
-    }
-    &#{$block-name}--disabled {
-        &#{$block-name}--checked #{$block-name}__slider {
-            background-color: var(--mc-field-toggle-disabled-color) !important;
-            filter: saturate(var(--mc-field-toggle-saturate-value));
-        }
-    }
-}
-</style>

package/src/elements/McInfinityLoadingIndicator/McInfinityLoadingIndicator.vue

@@ -1,97 +0,0 @@
-<template>
-    <section class="el-infinity-loading__wrapper">
-        <div :id="id" class="el-infinity-loading"></div>
-    </section>
-</template>
-<script>
-/**
- *  Вставляется под список, в момент когда индикатор попадает в viewport срабатывает $emit
- * **/
-export default {
-    name: 'ElInfinityLoading',
-    props: {
-        /**
-         * За какое расстояние(px) инициировать $emit
-         * **/
-        overlap: {
-            type: Number,
-            default: 100,
-        },
-        active: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Компонент в котором происходит скролл, указывается для большей точности, по дефолту используется область видимости браузера
-         * **/
-        root: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            observer: null,
-            el: null,
-            loading: false,
-            id: `indicator_${Date.now()}`,
-        }
-    },
-    watch: {
-        active(value) {
-            this.clearAllListeners()
-            if (value) {
-                this.setObserver()
-            }
-        },
-    },
-    mounted() {
-        this.setObserver()
-    },
-    beforeDestroy() {
-        this.clearAllListeners()
-    },
-    methods: {
-        setObserver() {
-            this.el = document.getElementById(this.id)
-            // создаем IntersectionObserver - смотрит за тем когда элемент попадает во viewport
-            this.observer = new IntersectionObserver(
-                ([entry]) => {
-                    // если попадает во viewport делаем $emit
-                    if ((entry.intersectionRatio === 1 || entry.isIntersecting) && this.active) {
-                        return this.$emit('loading')
-                    } else {
-                        return this.$emit('hide')
-                    }
-                },
-                {
-                    ...(this.root ? { root: this.$el.closest(this.root) } : {}),
-                    rootMargin: `${this.overlap}px`,
-                    threshold: 0.1,
-                },
-            )
-            // назначаем слушателя на observer
-            this.observer.observe(this.el)
-        },
-        clearAllListeners() {
-            this.observer && this.observer.disconnect()
-            this.observer = null
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.el-infinity-loading {
-    $block-name: &;
-    height: 1px;
-    width: 100%;
-    z-index: 999999;
-    user-select: none;
-    pointer-events: none;
-    background-color: transparent;
-    &__wrapper {
-        position: relative;
-    }
-}
-</style>

package/src/elements/McNotification/McNotification.vue

@@ -1,209 +0,0 @@
-<template>
-    <div class="mc-notification" :style="styles">
-        <div class="mc-notification__inner">
-            <mc-preview>
-                <!-- @slot Слот для иконки -->
-                <slot v-if="!hideIcon && ($slots.left || iconName)" slot="left" name="left">
-                    <mc-svg-icon :name="iconName" size="300" />
-                </slot>
-
-                <!-- @slot Слот заголовка -->
-                <slot v-if="$slots.header || title" slot="top" name="header">
-                    <mc-title
-                        v-if="title"
-                        :color="variation"
-                        :ellipsis="false"
-                        max-width="100%"
-                        weight="semi-bold"
-                        class="mc-notification__title"
-                    >
-                        {{ title }}
-                    </mc-title>
-                </slot>
-
-                <div slot="bottom" class="mc-notification__text">
-                    <!-- @slot Слот для контента -->
-                    <slot>
-                        <mc-title :color="variation" :ellipsis="false" max-width="100%">
-                            {{ content }}
-                        </mc-title>
-                    </slot>
-                </div>
-
-                <!-- @slot Слот для кнопок -->
-                <slot v-if="$slots.right || isButtonVisible" slot="right" name="right">
-                    <mc-button
-                        v-if="isButtonVisible"
-                        slot="right"
-                        :variation="variation"
-                        class="mc-notification__button"
-                        @click="handleClick"
-                    >
-                        {{ buttonText }}
-                    </mc-button>
-                </slot>
-            </mc-preview>
-        </div>
-    </div>
-</template>
-
-<script>
-import McTitle from '../McTitle/McTitle.vue'
-import McSvgIcon from '../McSvgIcon/McSvgIcon.vue'
-import McButton from '../McButton/McButton.vue'
-import McPreview from '../../patterns/McPreview/McPreview'
-
-export default {
-    name: 'McNotification',
-    components: { McPreview, McTitle, McSvgIcon, McButton },
-    props: {
-        /**
-         * Дизайн:
-         * purple, red, orange и т.д.
-         */
-        variation: {
-            type: String,
-            default: 'purple',
-        },
-        /**
-         * Заголовок блока
-         */
-        title: {
-            type: String,
-        },
-        /**
-         * Содержимое блока
-         */
-        content: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Отобразить кнопку внтури блока
-         */
-        isButtonVisible: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Текст кнопки
-         */
-        buttonText: {
-            type: String,
-            default: '',
-        },
-        /**
-         * Название иконки
-         */
-        iconName: {
-            type: String,
-            default: 'info',
-        },
-        /**
-         * Не отображать иконку
-         */
-        hideIcon: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    computed: {
-        styles() {
-            return {
-                '--mc-notification-color': this.variation && `var(--color-${this.variation})`,
-            }
-        },
-    },
-    methods: {
-        handleClick(e) {
-            /**
-             * Событие клика по кнопке
-             */
-            this.$emit('click', e)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-.mc-notification {
-    $block-name: &;
-    --mc-notification-color: #{$color-orange};
-    position: relative;
-    background-color: $color-white;
-    border-radius: $radius-150;
-    overflow: hidden;
-    &:before {
-        content: '';
-        @include position(absolute, 0 null null 0);
-        display: block;
-        height: 100%;
-        width: $size-50;
-        background-color: var(--mc-notification-color);
-    }
-
-    &__text {
-        font-size: $font-size-200;
-        line-height: $line-height-200;
-    }
-
-    #{$block-name}__text,
-    #{$block-name}__title {
-        filter: contrast(59%);
-    }
-
-    &__inner {
-        padding: $space-100 $space-150 $space-100 $space-200;
-        min-height: $size-700;
-        display: flex;
-        align-items: center;
-        position: relative;
-        color: var(--mc-notification-color);
-        &:before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--mc-notification-color);
-            opacity: 0.1;
-        }
-
-        .mc-preview {
-            width: 100%;
-            z-index: 1;
-            &__top {
-                margin-bottom: $space-50;
-            }
-            &__left {
-                display: flex;
-                align-items: center;
-                margin-inline-end: $size-150;
-            }
-            &__right {
-                display: flex;
-                align-items: center;
-                margin-inline-start: auto;
-                padding-inline-start: $space-100;
-            }
-        }
-
-        @media #{$media-query-m-down} {
-            .mc-preview {
-                flex-wrap: wrap;
-
-                &__center {
-                    flex: 1;
-                }
-                &__right {
-                    width: 100%;
-                    padding-top: $space-100;
-                    padding-inline-start: $size-400 - 2;
-                }
-            }
-        }
-    }
-}
-</style>