mediacube-ui 0.1.346 → 0.1.347

package/src/patterns/McDrawer/McDrawer.vue

@@ -1,146 +0,0 @@
-<template>
-    <div class="mc-drawer">
-        <div v-if="$slots.title || title" class="mc-drawer__header">
-            <!-- @slot Слот заголовка -->
-            <slot name="title">
-                <mc-title variation="subtitle" :ellipsis="titleEllipsis" weight="semi-bold">
-                    {{ title }}
-                </mc-title>
-            </slot>
-        </div>
-        <div class="mc-drawer__body">
-            <div class="mc-drawer__tint"></div>
-            <div class="mc-drawer__body-inner">
-                <!-- @slot Слот контента -->
-                <slot />
-            </div>
-        </div>
-        <div v-if="$slots.footer" class="mc-drawer__footer">
-            <!-- @slot Слот футера -->
-            <slot name="footer" />
-        </div>
-
-        <button v-if="closeVisible" type="button" class="mc-drawer__btn-close" @click.prevent="handleClose">
-            <mc-svg-icon class="mc-drawer__icon-close" :name="iconClose" />
-            <mc-svg-icon class="mc-drawer__icon-close--small" :name="iconClose" size="200" />
-        </button>
-    </div>
-</template>
-
-<script>
-import McSvgIcon from '../../elements/McSvgIcon/McSvgIcon'
-import McTitle from '../../elements/McTitle/McTitle'
-/**
- * More info: https://officert.github.io/vue-slideout-panel
- */
-export default {
-    name: 'McDrawer',
-    components: {
-        McSvgIcon,
-        McTitle,
-    },
-    props: {
-        /**
-         * Заголовок
-         */
-        title: {
-            type: String,
-            default: '',
-        },
-        titleEllipsis: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Нужна ли кнопка
-         * закрытия в шапке
-         */
-        closeVisible: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Тип иконки
-         * закрытия в шапке
-         */
-        iconClose: {
-            type: String,
-            default: 'close',
-        },
-    },
-
-    methods: {
-        handleClose() {
-            /**
-             * Событие закрытия панели
-             * @property {Object}
-             */
-            this.$emit('close-panel', {})
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-.mc-drawer {
-    $block-name: &;
-
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    @include custom-scroll();
-
-    &__header {
-        @include reset-text-indents();
-        padding: 18px $space-600 18px $space-200;
-        border-bottom: 1px solid $color-hover-gray;
-    }
-
-    &__body {
-        position: relative;
-        flex: 1 1 auto;
-        min-height: 0;
-        overflow-y: auto;
-        height: 100%;
-        &-inner {
-            max-height: 100%;
-            height: 100%;
-            overflow-y: auto;
-            padding: $space-400 $space-200;
-        }
-    }
-    &__footer {
-        border-top: 1px solid $color-hover-gray;
-        padding: $space-200 $space-200;
-    }
-
-    &__tint {
-        @include position(absolute, 0 5px null 0);
-        height: $size-400;
-        background: linear-gradient(180deg, $color-white 0%, rgba(255, 255, 255, 0) 100%);
-    }
-
-    &__btn-close {
-        @include reset-btn();
-        @include position(absolute, $space-100 $space-100 null null);
-        @include close-link();
-        z-index: 1;
-        padding: $space-100;
-    }
-    &__icon-close {
-        @include size($size-300);
-        &--small {
-            display: none;
-        }
-    }
-    @media #{$media-query-m-down} {
-        #{$block-name}__icon-close {
-            display: none;
-            &--small {
-                display: block;
-            }
-        }
-    }
-}
-</style>

package/src/patterns/McDropdown/McDropdown.vue

@@ -1,247 +0,0 @@
-<template>
-    <div v-click-outside="handleClickOutside" class="mc-dropdown" :class="dropdownClasses">
-        <div class="mc-dropdown__toggle" :class="toggleClasses" tabindex="0" @keyup.esc="closeDropdown">
-            <!-- @slot активатора переключения состояния -->
-            <slot name="activator" />
-        </div>
-        <div ref="dropdown_body" :style="dropdownBodyStyles" class="mc-dropdown__body">
-            <!-- @slot контента -->
-            <slot />
-        </div>
-    </div>
-</template>
-
-<script>
-import VueClickOutside from 'vue-click-outside'
-import _throttle from 'lodash/throttle'
-
-export default {
-    name: 'McDropdown',
-    directives: {
-        'click-outside': VueClickOutside,
-    },
-    props: {
-        /**
-         * Состояние видимости контента
-         */
-        value: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Выравнивание
-         * контента: 'left', 'right', 'auto'
-         */
-        position: {
-            type: String,
-            default: 'left',
-        },
-        /**
-         * Направление отображения
-         * контента: 'top', 'bottom', 'auto'
-         */
-        listPosition: {
-            type: String,
-            default: 'bottom',
-        },
-        /**
-         * Минимальная ширина выпадаюзего списка
-         */
-        listMinWidth: {
-            type: String,
-            default: 'inherit',
-        },
-        /**
-         * Необходимо ли вращение иконки
-         * (элементу для вращения, необходимо добавить класс 'rotate')
-         */
-        rotateIcon: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            local_list_position: null,
-            local_position: null,
-        }
-    },
-    computed: {
-        dropdownClasses() {
-            return {
-                [`mc-dropdown--position-${this.local_position}`]: this.local_position,
-                [`mc-dropdown--list-position-${this.local_list_position}`]: this.local_list_position,
-                ['mc-dropdown--is-open']: this.value,
-            }
-        },
-        dropdownBodyStyles() {
-            return {
-                'min-width': this.listMinWidth,
-            }
-        },
-        toggleClasses() {
-            return {
-                ['mc-dropdown__toggle--rotate-icon']: this.rotateIcon,
-            }
-        },
-        activator() {
-            return this.$slots.activator[0].elm
-        },
-    },
-
-    watch: {
-        $route() {
-            this.value && this.closeDropdown()
-        },
-        value() {
-            this.$nextTick(() => {
-                this.calculateDropdownPosition()
-            })
-        },
-    },
-
-    mounted() {
-        this.activator.addEventListener('click', this.toggleDropdown)
-        window.addEventListener('resize', this.throttledCalculateDropdownPosition)
-        window.addEventListener('transitionrun', this.throttledCalculateDropdownPosition)
-    },
-
-    beforeDestroy() {
-        this.activator.removeEventListener('click', this.toggleDropdown)
-        window.removeEventListener('resize', this.throttledCalculateDropdownPosition)
-        window.removeEventListener('transitionrun', this.throttledCalculateDropdownPosition)
-    },
-
-    methods: {
-        toggleDropdown() {
-            /**
-             * Событие по тогглу
-             * @property {Boolean}
-             */
-            this.$emit('input', !this.value)
-        },
-        handleClickOutside(e) {
-            if (!this.value || !document.body.contains(e.target)) return
-            this.value && this.closeDropdown()
-        },
-        closeDropdown() {
-            this.$emit('input', false)
-        },
-        calculateDropdownPosition() {
-            if (!this.$refs.dropdown_body) return
-            const rect = this.activator.getBoundingClientRect()
-            const space_below = window.innerHeight - rect.bottom
-            const space_left = window.innerWidth - rect.left
-            const { offsetHeight: dropdown_height, offsetWidth: dropdown_width } = this.$refs.dropdown_body
-            // Определяем направление отображения списка
-            const auto_list_position = space_below < dropdown_height ? 'top' : 'bottom'
-            const auto_position = space_left > dropdown_width ? 'left' : 'right'
-            // Устанавливаем значения в зависимости от position
-            this.local_list_position = this.listPosition === 'auto' ? auto_list_position : this.listPosition
-            this.local_position = this.position === 'auto' ? auto_position : this.position
-        },
-        throttledCalculateDropdownPosition: _throttle(function() {
-            this.calculateDropdownPosition()
-        }, 200),
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-@import '../../tokens/z-indexes';
-@import '../../tokens/durations';
-.mc-dropdown {
-    $block-name: &;
-
-    position: relative;
-    display: inline-block;
-
-    &__toggle {
-        outline: none;
-        @include reset-text-indents();
-        .mc-svg-icon {
-            transition: all $duration-s;
-        }
-    }
-
-    &__body {
-        @include position(absolute, null null null 0);
-        z-index: $z-index-dropdown;
-        height: 0;
-        overflow: hidden;
-        margin: 0;
-        background-color: transparent;
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity $duration-s, transform $duration-s;
-
-        .mc-button {
-            &:not(.nuxt-link-active):not(.mc-button--is-active):not(.mc-button--variation-red-flat) {
-                &:hover {
-                    .mc-button__background {
-                        opacity: 0 !important;
-                    }
-                    background-color: fade-out($color-purple, 0.9);
-                }
-            }
-        }
-    }
-
-    &--list-position-top {
-        #{$block-name} {
-            &__body {
-                bottom: 100%;
-                margin-bottom: $space-100;
-            }
-        }
-    }
-
-    &--list-position-bottom {
-        #{$block-name} {
-            &__body {
-                top: 100%;
-                margin-top: $space-100;
-            }
-        }
-    }
-
-    &--is-open {
-        #{$block-name} {
-            &__body {
-                height: auto;
-                visibility: visible;
-                overflow: visible;
-                opacity: 1;
-            }
-        }
-
-        #{$block-name} {
-            &__toggle--rotate-icon {
-                .rotate {
-                    position: relative;
-                    transform: rotate(180deg);
-                }
-            }
-        }
-    }
-
-    &--position-right {
-        #{$block-name} {
-            &__body {
-                inset-inline-start: auto;
-                inset-inline-end: 0;
-            }
-        }
-    }
-
-    &--position-left {
-        #{$block-name} {
-            &__body {
-                inset-inline-start: 0;
-                inset-inline-end: auto;
-            }
-        }
-    }
-}
-</style>

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

@@ -1,40 +0,0 @@
-<template>
-    <section class="mc-dropdown-panel">
-        <!-- @slot Слот контента -->
-        <slot />
-    </section>
-</template>
-
-<script>
-export default {
-    name: 'McDropdownPanel',
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-@import '../../../tokens/box-shadows';
-.mc-dropdown-panel {
-    $block-name: &;
-
-    box-shadow: $shadow-s;
-    border-radius: $radius-150;
-    background-color: $color-white;
-    padding: $space-100;
-    max-width: 320px;
-
-    &:empty {
-        display: none;
-    }
-
-    .mc-button {
-        &--size-m {
-            font-weight: $font-weight-medium;
-            padding: $space-100;
-            .mc-svg-icon {
-                @include size($size-300);
-            }
-        }
-    }
-}
-</style>

package/src/patterns/McFakeScroll/McFakeScroll.vue

@@ -1,277 +0,0 @@
-<template>
-    <div ref="main" :class="mainClasses">
-        <div class="mc-fake-scroll__main">
-            <!-- @slot Слот для <strong>одного (!)</strong> элемента со скроллом -->
-            <slot />
-        </div>
-        <div
-            ref="track"
-            :class="trackClasses"
-            @mousedown.stop="onFakeScrollBarTrackMouseDown"
-            @click.stop="onFakeScrollBarTrackClick"
-        >
-            <div
-                ref="thumb"
-                class="mc-fake-scroll__thumb"
-                :style="thumbStyles"
-                @mousedown.stop="onFakeScrollBarMouseDown"
-            ></div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'McFakeScroll',
-    props: {
-        /**
-         * Значение медиа-запроса (из токенов),
-         * при котором скроллбар
-         * будет виден всегда:
-         * `xl`, `xl-down`, `l`, `l-down`, `m`, `m-down` и т.д.
-         */
-        visible: {
-            type: String,
-            default: '',
-        },
-    },
-    data() {
-        return {
-            hasScroll: false,
-            thumbBox: null,
-            trackBox: null,
-            thumbHeight: 0,
-            scrollRatio: 1,
-            trackIsClicked: false,
-            dragOptions: {
-                startClientPos: 0,
-                distance: 0,
-                mouseIsDown: false,
-            },
-            scrollElContentHeight: null,
-        }
-    },
-    computed: {
-        thumbStyles() {
-            return {
-                height: `${this.thumbHeight}px`,
-            }
-        },
-
-        scrollEl() {
-            return this.$slots.default ? this.$slots.default[0].elm : null
-        },
-        mainClasses() {
-            return {
-                'mc-fake-scroll': true,
-                [`mc-fake-scroll--visible${this.visible && `-${this.visible}`}`]: this.hasScroll,
-            }
-        },
-        trackClasses() {
-            return {
-                'mc-fake-scroll__track': true,
-                'mc-fake-scroll__track--visible': this.hasScroll,
-            }
-        },
-    },
-    mounted() {
-        this.scrollEl && this.scrollEl.addEventListener('scroll', this.onFakeScrollBarContentScroll)
-
-        this.$nextTick(() => {
-            this.updateData()
-        })
-        window.addEventListener('resize', this.resize)
-
-        document.documentElement.addEventListener('mousemove', this.onFakeScrollBarMouseMove)
-        document.documentElement.addEventListener('mouseup', this.onFakeScrollBarMouseUp)
-    },
-
-    beforeDestroy() {
-        this.scrollEl && this.scrollEl.removeEventListener('scroll', this.onFakeScrollBarContentScroll)
-        document.documentElement.removeEventListener('mousemove', this.onFakeScrollBarMouseMove)
-        document.documentElement.removeEventListener('mouseup', this.onFakeScrollBarMouseUp)
-
-        window.removeEventListener('resize', this.resize)
-    },
-    methods: {
-        resize() {
-            this.updateData()
-        },
-        updateData() {
-            this.checkScroll()
-            this.setBoxes()
-            this.setThumbHeight()
-            this.setScrollRatio()
-            this.scrollElContentHeight = this.scrollEl.scrollHeight
-        },
-        resetData() {
-            this.scrollEl.scrollTo(0, 0)
-            this.scrollElContentHeight = this.scrollEl.scrollHeight
-            setTimeout(() => {
-                this.updateData()
-            }, 0)
-        },
-        checkScroll() {
-            this.hasScroll = false
-            if (this.scrollEl) {
-                this.hasScroll = this.scrollEl.clientHeight < this.scrollEl.scrollHeight
-            }
-        },
-        setThumbHeight() {
-            if (this.scrollEl) {
-                const thumbRatio = Math.min(this.scrollEl.clientHeight / this.scrollEl.scrollHeight, 1.0)
-                this.thumbHeight = this.scrollEl.clientHeight * thumbRatio
-                if (this.$refs.thumb) {
-                    this.thumbBox.height = this.$refs.thumb.getBoundingClientRect().height
-                }
-            }
-        },
-        setScrollRatio() {
-            if (this.thumbBox && this.trackBox) {
-                const availableTrackWay = this.trackBox.height - this.thumbHeight
-                const availableContentWay = this.scrollEl.scrollHeight - this.scrollEl.clientHeight
-                this.scrollRatio = Math.min(availableTrackWay / availableContentWay, 1.0)
-            }
-        },
-        setBoxes() {
-            this.thumbBox = this.getBoxPos(this.$refs.thumb)
-            this.trackBox = this.getBoxPos(this.$refs.track)
-        },
-        getBoxPos(el) {
-            if (!el) return null
-            const box = el.getBoundingClientRect()
-            return {
-                height: box.height,
-                bottom: box.bottom,
-                top: box.top + window.pageYOffset,
-            }
-        },
-
-        onFakeScrollBarTrackMouseDown(e) {
-            this.updateData()
-            let pos = e.clientY - this.trackBox.top
-            if (pos > this.trackBox.height - this.thumbBox.height * 0.5) {
-                pos -= this.thumbBox.height
-            } else if (pos > this.thumbBox.height * 0.5) {
-                pos -= this.thumbBox.height * 0.5
-            }
-
-            this.trackIsClicked = true
-            this.scrollEl.scrollTo({
-                top: pos / this.scrollRatio,
-                behavior: 'smooth',
-            })
-        },
-        onFakeScrollBarTrackClick() {
-            this.trackIsClicked = false
-        },
-        onFakeScrollBarMouseDown(e) {
-            this.dragOptions.startClientPos = e.clientY
-            this.dragOptions.mouseIsDown = true
-            this.setBoxes()
-            document.body.classList.add('no-user-select')
-        },
-        onFakeScrollBarMouseMove(e) {
-            if (!this.dragOptions.mouseIsDown) return
-
-            this.setThumbHeight()
-            this.setScrollRatio()
-
-            this.dragOptions.distance = e.clientY - this.dragOptions.startClientPos
-
-            let calculateTopPos = this.thumbBox.top - this.trackBox.top + this.dragOptions.distance
-            this.setThumbPos(calculateTopPos)
-            this.scrollEl.scrollTo(0, calculateTopPos / this.scrollRatio)
-        },
-        setThumbPos(pos) {
-            if (pos < 0) {
-                this.$refs.thumb.style.top = '0px'
-            } else if (pos + this.thumbBox.height > this.trackBox.height) {
-                this.$refs.thumb.style.top = `${this.trackBox.height - this.thumbBox.height}px`
-            } else {
-                this.$refs.thumb.style.top = `${pos}px`
-            }
-        },
-        onFakeScrollBarMouseUp() {
-            this.dragOptions.mouseIsDown = false
-            document.body.classList.remove('no-user-select')
-        },
-        onFakeScrollBarContentScroll(e) {
-            const startScrollElContentHeight = this.scrollElContentHeight
-            if (this.dragOptions.mouseIsDown || this.trackIsClicked) return
-
-            this.updateData()
-            const topPos = e.target.scrollTop
-            this.setThumbPos(topPos * this.scrollRatio)
-
-            if (startScrollElContentHeight !== e.target.scrollHeight) {
-                this.scrollEl.scrollTo(0, e.target.scrollHeight * this.scrollRatio)
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-@mixin track-visibility() {
-    right: 0;
-    width: 7px;
-    opacity: 1;
-}
-.mc-fake-scroll {
-    $block-name: &;
-    &__main {
-        > * {
-            @include hide-scrollbar();
-        }
-    }
-    position: relative;
-    &__track {
-        @include position(absolute, 0 -7px 0 null);
-        width: 0;
-        opacity: 0;
-        background-color: $color-transparent;
-        z-index: 101;
-        display: block;
-    }
-    &__thumb {
-        @include position(absolute, 0 1px null 1px);
-        background-color: $color-outline-gray;
-        height: 100px;
-        border-radius: $radius-100;
-        &:hover,
-        &:active {
-            background-color: $color-gray;
-        }
-    }
-    &:hover {
-        #{$block-name}__track--visible {
-            @include track-visibility();
-        }
-    }
-    &__track--visible:active {
-        @include track-visibility();
-    }
-
-    &--visible {
-        #{$block-name}__track {
-            @include track-visibility();
-        }
-        @each $name, $value in $token-media-queries {
-            &-#{$name} {
-                @media #{$value} {
-                    #{$block-name}__track {
-                        @include track-visibility();
-                    }
-                }
-            }
-        }
-    }
-}
-.no-user-select {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-</style>