mediacube-ui 0.1.347 → 0.1.349

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

@@ -0,0 +1,273 @@
+<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';
+@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);
+    --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

@@ -0,0 +1,97 @@
+<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

@@ -0,0 +1,215 @@
+<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';
+@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};
+    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>