mediacube-ui 0.1.347 → 0.1.349

package/src/patterns/McOverlay/McOverlay.vue

@@ -0,0 +1,79 @@
+<template>
+    <section ref="overlay" class="mc-overlay" :style="styles">
+        <div class="mc-overlay__background" />
+        <section class="mc-overlay__spinner" />
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'McOverlaySecond',
+    props: {
+        size: {
+            type: [String, Number],
+            default: 500,
+        },
+        backgroundColor: {
+            type: String,
+            default: 'white',
+        },
+    },
+    computed: {
+        styles() {
+            return {
+                '--mc-overlay-color': this.backgroundColor && `var(--color-${this.backgroundColor})`,
+                '--mc-overlay-spinner-size': this.size && `var(--size-${this.size})`,
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../tokens/z-indexes';
+@import '../../tokens/colors';
+.mc-overlay {
+    $block-name: &;
+    --mc-overlay-spinner-size: initial;
+    --mc-overlay-color: initial;
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $z-index-overlay-page;
+    &__background {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--mc-overlay-color);
+        opacity: 0.85;
+    }
+    &__spinner {
+        display: block;
+        border: 2px solid $color-purple;
+        border-inline-start-color: transparent;
+        border-radius: 50%;
+        animation: rotate 1.5s infinite linear;
+
+        width: var(--mc-overlay-spinner-size);
+        min-width: var(--mc-overlay-spinner-size);
+        height: var(--mc-overlay-spinner-size);
+        min-height: var(--mc-overlay-spinner-size);
+
+        @keyframes rotate {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McPreview/McPreview.vue

@@ -0,0 +1,119 @@
+<template>
+    <section :class="classes">
+        <div v-if="$slots.left" class="mc-preview__left">
+            <!-- @slot Слот слева -->
+            <slot name="left" />
+        </div>
+        <div class="mc-preview__center">
+            <div class="mc-preview__top">
+                <!-- @slot Слот сверху -->
+                <slot name="top" />
+            </div>
+            <div class="mc-preview__bottom">
+                <!-- @slot Слот внизу -->
+                <slot name="bottom" />
+            </div>
+        </div>
+        <div v-if="$slots.right" class="mc-preview__right">
+            <!-- @slot Слот справа -->
+            <slot name="right" />
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'McPreview',
+    props: {
+        /**
+         *  Размеры:
+         *  `s, m, l`
+         */
+        size: {
+            type: String,
+            default: 'm',
+        },
+    },
+    computed: {
+        classes() {
+            return {
+                'mc-preview': true,
+                [`mc-preview--size-${this.size}`]: this.size,
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/mixins';
+@import '../../tokens/spacings';
+.mc-preview {
+    $block-name: &;
+
+    @include reset-text-indents();
+    display: flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+
+    &__left {
+        flex: 0 0 auto;
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__center {
+        @include layout-flex-fix();
+        flex: 1 1 auto;
+        align-self: center;
+    }
+
+    &__top {
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__bottom {
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__right {
+        flex: 0 0 auto;
+        &:empty {
+            display: none;
+        }
+    }
+    @mixin previewIndents($indent, $bottom: '') {
+        #{$block-name}__left {
+            margin-inline-end: $indent;
+        }
+        #{$block-name}__right {
+            margin-inline-start: $indent;
+        }
+        @if $bottom {
+            #{$block-name}__bottom {
+                margin-top: $bottom;
+            }
+        }
+    }
+
+    &--size {
+        &-s {
+            @include previewIndents($space-50);
+        }
+        &-m {
+            @include previewIndents($space-100);
+        }
+        &-l {
+            @include previewIndents($space-150, $space-50);
+        }
+        &-xl {
+            @include previewIndents($space-200, $space-50);
+        }
+    }
+}
+</style>

package/src/patterns/McSideBar/McSideBar/McSideBar.vue

@@ -0,0 +1,389 @@
+<template>
+    <article ref="sidebar-wrapper" class="mc-side-bar-wrapper" :style="wrapperStyles">
+        <section class="mc-side-bar-wrapper__backdrop" :class="backdropClasses" @click.stop.prevent="handleToggleSize">
+            <div ref="sidebar" class="mc-side-bar" :class="sideBarClasses" :style="sideBarStyles" @click.stop>
+                <mc-side-bar-top
+                    :logo-title="logoTitle"
+                    :logo-title-variation="logoTitleVariation"
+                    :logo-src="logoSrc"
+                    :logo-icon="logoIcon"
+                    :compact="prettyCompact"
+                    :menu-apps="menuApps"
+                >
+                    <slot slot="title-append" name="title-append" />
+                </mc-side-bar-top>
+                <section class="mc-side-bar__scrollable-container">
+                    <mc-side-bar-center
+                        :title="menuMainTitle"
+                        :menu-main="menuMain"
+                        :counts="counts"
+                        :chatra-config="chatraConfig"
+                        :user="user"
+                        :compact="prettyCompact"
+                        @handlerChatraClick="$emit('chatraClick')"
+                        @open-side-bar="openSideBar"
+                    />
+                    <mc-side-bar-bottom
+                        :hide-text="hideText"
+                        :compact="prettyCompact"
+                        :hidden-mode="hiddenMode"
+                        :sidebar-width="width"
+                        @toggle-size="handleToggleSize"
+                    >
+                        <slot slot="bottom-message" name="bottom-message" />
+                    </mc-side-bar-bottom>
+                </section>
+            </div>
+        </section>
+    </article>
+</template>
+
+<script>
+import McSideBarTop from '../McSideBarTop/McSideBarTop'
+import McSideBarCenter from '../McSideBarCenter/McSideBarCenter'
+import McSideBarBottom from '../McSideBarBottom/McSideBarBottom'
+export default {
+    name: 'McSideBar',
+    components: {
+        McSideBarTop,
+        McSideBarCenter,
+        McSideBarBottom,
+    },
+    provide() {
+        const provideData = {}
+        const properties = ['currentThemeConfig']
+        properties.forEach(property => {
+            Object.defineProperty(provideData, property, {
+                enumerable: true,
+                get: () => this[property],
+            })
+        })
+        return { provideData }
+    },
+    props: {
+        /**
+         *  Название сервиса
+         *
+         */
+        logoTitle: {
+            type: String,
+            default: 'Dashboard',
+        },
+        /**
+         *  Размер текста названия сервиса
+         *
+         */
+        logoTitleVariation: {
+            type: String,
+            default: 'subtitle',
+        },
+        /**
+         *  Путь до изображения
+         *
+         */
+        logoSrc: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Имя иконки
+         *  заголовка
+         */
+        logoIcon: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Заголовок
+         *  центрального блока
+         */
+        menuMainTitle: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Центральное меню
+         *
+         */
+        menuMain: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         *  Меню приложений
+         *
+         */
+        menuApps: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         *  Id чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: null,
+        },
+        /**
+         *  Данные пользователя
+         *
+         */
+        user: {
+            type: Object,
+            default: null,
+        },
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Цветовая схема
+         */
+        variable: {
+            type: String,
+            default: 'black',
+        },
+        /**
+         * Ширина сайдбара
+         */
+        width: {
+            type: String,
+            default: '216px',
+        },
+        /**
+         * Ширина компактного сайдбара
+         */
+        compactWidth: {
+            type: String,
+            default: '58px',
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар становится абсолютным и появляется затемненный бэкдроп
+         */
+        absoluteBreakpoint: {
+            type: Number,
+            default: null,
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар полностью прячется
+         */
+        hiddenBreakpoint: {
+            type: Number,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            isHidden: false,
+            prettyCompact: this.compact,
+            hasCompactClass: this.compact,
+            windowWidth: null,
+        }
+    },
+    computed: {
+        sideBarClasses() {
+            return {
+                'mc-side-bar--compact': this.hasCompactClass,
+                [this.currentThemeConfig.className]: true,
+            }
+        },
+        sideBarStyles() {
+            return {
+                overflow: `${this.isHidden ? 'hidden' : 'visible'}`,
+                width: this.hasCompactClass ? this.compactWidth : this.width,
+            }
+        },
+        wrapperStyles() {
+            const position =
+                this.hiddenMode && this.hasCompactClass
+                    ? {
+                          position: 'absolute',
+                          left: `-${this.compactWidth}`,
+                      }
+                    : {}
+
+            let width = {
+                width: this.hasCompactClass ? this.compactWidth : this.width,
+            }
+            if (this.absoluteMode) {
+                width.width = this.compactWidth
+            }
+            if (this.hiddenMode) {
+                width.width = '0px'
+            }
+            return {
+                ...width,
+                ...position,
+            }
+        },
+        backdropClasses() {
+            return {
+                'mc-side-bar-wrapper__backdrop--full-width':
+                    !this.hasCompactClass && this.windowWidth < this.absoluteBreakpoint,
+            }
+        },
+        absoluteMode() {
+            return this.absoluteBreakpoint && this.windowWidth < this.absoluteBreakpoint
+        },
+        hiddenMode() {
+            return this.hiddenBreakpoint && this.windowWidth < this.hiddenBreakpoint
+        },
+        currentThemeConfig() {
+            return this.sidebarThemeConfig[this.variable] || this.sidebarThemeConfig['black']
+        },
+        sidebarThemeConfig() {
+            return {
+                black: {
+                    mode: 'black',
+                    className: 'mc-side-bar--color-theme-black',
+                    dropdownActivator: 'white',
+                    mainMenuLinks: {
+                        variable: 'gray-flat',
+                        secondaryColor: 'white',
+                    },
+                    closeButton: {
+                        variable: 'gray-link',
+                        secondaryColor: 'white',
+                    },
+                },
+                white: {
+                    mode: 'white',
+                    className: 'mc-side-bar--color-theme-white',
+                    dropdownActivator: 'black',
+                    mainMenuLinks: {
+                        variable: 'black-flat',
+                        secondaryColor: 'purple',
+                    },
+                    closeButton: {
+                        variable: 'black-link',
+                        secondaryColor: 'purple',
+                    },
+                },
+            }
+        },
+    },
+    watch: {
+        hasCompactClass(newValue) {
+            if (newValue) {
+                setTimeout(() => {
+                    this.prettyCompact = newValue
+                }, 280)
+            } else {
+                this.prettyCompact = newValue
+            }
+            this.isHidden = true
+            setTimeout(() => {
+                this.isHidden = false
+            }, 280)
+        },
+        compact(newValue) {
+            this.hasCompactClass = newValue
+        },
+        absoluteMode: {
+            immediate: true,
+            handler(val) {
+                this.$emit('absolute-mode', val)
+            },
+        },
+        hiddenMode: {
+            immediate: true,
+            handler(val) {
+                this.$emit('hidden-mode', val)
+            },
+        },
+    },
+    mounted() {
+        if (this.absoluteBreakpoint || (this.hiddenBreakpoint && window)) {
+            this.resize()
+            window.addEventListener('resize', this.resize)
+        }
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.resize)
+    },
+    methods: {
+        handleToggleSize() {
+            this.hasCompactClass = !this.hasCompactClass
+            this.$emit('compact', this.hasCompactClass)
+        },
+        openSideBar() {
+            this.hasCompactClass = false
+            this.$emit('compact', this.hasCompactClass)
+        },
+        resize() {
+            this.windowWidth = window.innerWidth
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../../styles/mixins';
+@import '../../../tokens/colors';
+@import '../../../tokens/spacings';
+.mc-side-bar {
+    $block-name: &;
+
+    display: flex;
+    flex-direction: column;
+    padding: $space-250 $space-100 $space-400;
+    transition: width 300ms ease;
+    overflow-x: hidden;
+    overflow-y: auto;
+    @include child-indent-bottom($space-400);
+    &--color-theme-black {
+        background-color: $color-black;
+    }
+    &--color-theme-white {
+        background-color: $color-white;
+        border-inline-end: 1px solid $color-hover-gray;
+    }
+    &__scrollable-container {
+        @include hide-scrollbar;
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+    &-wrapper {
+        height: 100%;
+        transition: width 300ms ease;
+        &__backdrop {
+            position: absolute;
+            background-color: rgba($color-black, 0.6);
+            z-index: 25;
+            height: inherit;
+            .mc-side-bar {
+                height: inherit;
+            }
+            &--full-width {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McSideBar/McSideBarBottom/McSideBarBottom.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="mc-side-bar-bottom" :class="classes">
+        <div
+            v-if="!compact && $slots['bottom-message']"
+            class="mc-side-bar-bottom__slot-message"
+            :style="messageStyles"
+        >
+            <slot name="bottom-message" />
+        </div>
+        <mc-side-bar-button
+            v-if="!hiddenMode"
+            class="mc-side-bar-bottom__hide-button"
+            icon="arrow_backward"
+            :title="hideText"
+            :compact="compact"
+            :variation="closeButtonProps.variable"
+            :secondary-color="closeButtonProps.secondaryColor"
+            @click="handleClick"
+        />
+    </div>
+</template>
+
+<script>
+import McSideBarButton from '../McSideBarButton/McSideBarButton'
+export default {
+    name: 'McSideBarBottom',
+    components: {
+        McSideBarButton,
+    },
+    inject: ['provideData'],
+    props: {
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+        hiddenMode: {
+            type: Boolean,
+            default: false,
+        },
+        sidebarWidth: {
+            type: String,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            hasCompactClass: this.compact,
+        }
+    },
+    computed: {
+        closeButtonProps() {
+            return this.provideData?.currentThemeConfig?.closeButton || {}
+        },
+        classes() {
+            return {
+                'mc-side-bar-bottom--compact': this.hasCompactClass,
+            }
+        },
+        messageStyles() {
+            return {
+                minWidth: this.sidebarWidth,
+            }
+        },
+    },
+    watch: {
+        compact(newValue) {
+            this.hasCompactClass = newValue
+        },
+    },
+    methods: {
+        handleClick() {
+            if (this.hasCompactClass !== this.compact) return
+            this.$emit('toggle-size', !this.compact)
+            this.hasCompactClass = !this.hasCompactClass
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../../tokens/durations';
+@import '../../../tokens/spacings';
+.mc-side-bar-bottom {
+    $block-name: &;
+
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    justify-content: flex-end;
+    min-height: max-content;
+
+    &__hide-button {
+        .mc-side-bar-button__icon {
+            transition: transform $duration-s;
+        }
+    }
+
+    &--compact {
+        #{$block-name}__hide-button {
+            .mc-side-bar-button__icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    &__slot-message {
+        margin-inline-start: -$space-100;
+        margin-inline-end: -$space-100;
+        padding-inline-start: $space-100;
+        padding-inline-end: $space-100;
+        & + * {
+            margin-top: $space-500;
+        }
+    }
+}
+</style>