mediacube-ui 0.1.346 → 0.1.347

package/src/patterns/McTable/McTableCol/McTableCol.vue

@@ -1,296 +0,0 @@
-<template>
-    <vxe-table-column v-bind="attrs" class="mc-table-col" v-on="$listeners">
-        <template v-slot="{ row, rowIndex }">
-            <!-- @slot Слот для mc-table-col -->
-            <slot :row="row">
-                <mc-title
-                    :text-align="textAlign"
-                    :ellipsis="ellipsis"
-                    weight="normal"
-                    class="mc-table-col__title"
-                    v-html="$attrs.type === 'seq' ? rowIndex + 1 : row[defaultTitle]"
-                />
-            </slot>
-            <div v-if="$scopedSlots.right" class="mc-table-col__right">
-                <!-- @slot Слот справа в ячейке (абсолютно спозиционированный, с бэкграундом) -->
-                <slot :row="row" name="right" />
-            </div>
-        </template>
-        <template v-slot:header="{ column }">
-            <!-- @slot Слот заголовка столбца -->
-            <slot :column="column" name="header">
-                <mc-title :text-align="textAlign" class="mc-table-col__title" weight="semi-bold">
-                    <mc-svg-icon
-                        v-if="isSortable"
-                        slot="icon-prepend"
-                        :name="getSortIcon(column)"
-                        :color="getSortColor(column)"
-                        size="200"
-                    />{{
-                        $attrs.type === 'seq' ? '#' : column.title
-                    }}<div slot="icon-append" class="mc-table-col__header-append">
-                        <!-- @slot Слот для вставки в конец после заголовка столбца -->
-                        <slot name="header-append" />
-                    </div>
-                </mc-title>
-                <div v-if="$scopedSlots['header-right'] || headerRight" class="mc-table-col__header-right">
-                    <!-- @slot Слот справа в ячейке хедера (абсолютно спозиционированный, с бэкграундом) -->
-                    <slot :column="column" name="header-right">
-                        <mc-chip
-                            v-if="headerRight"
-                            class="mc-table-col__total"
-                            variation="gray-invert"
-                            size="s-compact"
-                        >
-                            {{ headerRight }}
-                        </mc-chip>
-                    </slot>
-                </div>
-            </slot>
-        </template>
-        <template v-slot:footer="{ columnIndex, items }">
-            <mc-title
-                v-if="items[columnIndex]"
-                :text-align="textAlign"
-                weight="semi-bold"
-                v-html="`${items[columnIndex]} ${totalAppend}`"
-            />
-            <template v-else-if="getVisibilityCommonInfo(columnIndex, items)">
-                <mc-title v-if="!provideData.canShowLoader" class="mc-table-col__title" weight="semi-bold">
-                    {{ firstColFooter }}
-                </mc-title>
-                <span v-if="provideData.canShowLoader" ref="loader" class="mc-table-col__loader"></span>
-            </template>
-        </template>
-    </vxe-table-column>
-</template>
-
-<script>
-import McTitle from '../../../elements/McTitle/McTitle'
-import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
-import McChip from '../../../elements/McChip/McChip'
-
-/**
- * Смотреть mc-table
- */
-export default {
-    name: 'McTableCol',
-    components: {
-        McTitle,
-        McSvgIcon,
-        McChip,
-    },
-    inject: ['provideData'],
-    props: {
-        /**
-         *  Если нужен бордер
-         *  справа от столбца
-         */
-        hasBorder: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         *  Если нужна доп инфа
-         *  в ячейке заголовка справа
-         */
-        headerRight: {
-            type: [Number, String],
-            default: null,
-        },
-        /**
-         * Нужно ли применять фильтры для тотала колонки
-         * */
-        modifyTotal: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    computed: {
-        attrs() {
-            const classes = {
-                'class-name': this.handleClassName,
-                'header-class-name': this.handleClassName,
-                'footer-class-name': this.handleFooterClassName,
-            }
-            return {
-                ...classes,
-                ...this.$attrs,
-                params: {
-                    ...this.$attrs.params,
-                    modifyTotal: this.modifyTotal,
-                },
-            }
-        },
-        defaultTitle() {
-            return this.$attrs.field
-        },
-        textAlign() {
-            return this.$attrs.align || 'left'
-        },
-        totalAppend() {
-            return this.$attrs['total-append'] || ''
-        },
-        isSortable() {
-            // eslint-disable-next-line no-prototype-builtins
-            return this.$attrs.hasOwnProperty('sortable') && this.$attrs.sortable !== false
-        },
-        ellipsis() {
-            // eslint-disable-next-line no-prototype-builtins
-            if (!this.$attrs.hasOwnProperty('show-overflow')) return true
-            return this.$attrs['show-overflow'] !== false
-        },
-        firstColFooter() {
-            switch (this.provideData.footerInfo) {
-                case 'total':
-                    return this.provideData.placeholders.total
-                case 'loaded':
-                    return this.provideData.placeholders.all_loaded
-                default:
-                    return ''
-            }
-        },
-    },
-    methods: {
-        getVisibilityCommonInfo(columnIndex, items) {
-            const index = items.indexOf(null)
-            return columnIndex === index
-        },
-        getSortIcon(column) {
-            if (this.provideData.sortedBy && column.property === this.provideData.sortedBy) {
-                return this.provideData.sortedDescending ? 'arrow_downward' : 'arrow_upward'
-            }
-            return 'arrow_up_down'
-        },
-        getSortColor(column) {
-            if (this.provideData.sortedBy && column.property === this.provideData.sortedBy) {
-                return 'black'
-            }
-            return 'outline-gray'
-        },
-        handleClassName() {
-            const classes = []
-            if (this.hasBorder && !this.provideData.cardIsOpen) {
-                classes.push('mc-table-col--border-right')
-            }
-            if (this.$attrs['show-overflow'] === false) {
-                classes.push('mc-table-col--overflow-visible')
-            }
-            return classes
-        },
-        handleFooterClassName() {
-            if (this.hasBorder && !this.provideData.cardIsOpen) {
-                return 'mc-table-col--border-right'
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-@import '~vxe-table/styles/variable.scss';
-//override variables:
-@import '../../../styles/table.scss';
-
-@mixin col-right-color($color) {
-    .mc-table-col__right {
-        background-color: $color;
-        &::before {
-            background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, $color);
-        }
-    }
-}
-.mc-table-col {
-    $block-name: &;
-
-    &--border-right {
-        border-inline-end: 1px solid $color-hover-gray;
-    }
-    &--border-top {
-        border-top: 1px solid $color-hover-gray;
-    }
-    &--border-bottom {
-        border-bottom: 1px solid $color-hover-gray;
-    }
-    &--overflow-visible {
-        .vxe-cell {
-            overflow: visible !important;
-        }
-    }
-
-    &__total {
-        margin-inline-start: auto;
-        color: $color-gray;
-    }
-
-    &__title {
-        width: auto;
-        max-width: 101%;
-    }
-    &__header-append {
-        display: flex;
-        align-items: center;
-    }
-    &__right {
-        display: flex;
-        opacity: 0;
-        pointer-events: none;
-        align-items: center;
-        flex-wrap: nowrap;
-        @include position(absolute, 0 $space-200 0 null);
-        @include child-indent-right($space-50);
-        background-color: $color-white;
-
-        &::before {
-            @include pseudo();
-            @include position(null, 0 100% 0 null);
-            width: $size-300;
-            background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, $color-white);
-        }
-    }
-    &__header-right {
-        @extend .mc-table-col__right;
-        display: flex;
-        opacity: 1;
-        pointer-events: unset;
-    }
-}
-
-.vxe-cell {
-    &--title {
-        font-weight: $font-weight-semi-bold;
-    }
-    &.c--tooltip,
-    &.c--title {
-        text-overflow: clip !important;
-        white-space: normal !important;
-    }
-}
-.vxe-body--row {
-    transition: background-color 0s;
-    &.row--stripe {
-        @include col-right-color($vxe-table-row-striped-background-color);
-    }
-    &.row--hover {
-        .mc-table-col__right {
-            opacity: 1;
-            pointer-events: unset;
-        }
-        @include col-right-color($vxe-table-row-hover-background-color);
-        &.row--current {
-            @include col-right-color($vxe-table-row-hover-current-background-color);
-        }
-    }
-    &.row--current {
-        @include col-right-color($vxe-table-row-current-background-color);
-    }
-    // описка названия в библиотеке таблицы
-    &.row--cheched {
-        @include col-right-color($vxe-table-row-cheched-background-color);
-        &.row--hover {
-            @include col-right-color($vxe-table-row-hover-cheched-background-color);
-        }
-    }
-}
-</style>

package/src/patterns/McTableCard/McTableCard.vue

@@ -1,135 +0,0 @@
-<template>
-    <div class="mc-table-card" :style="{ marginLeft: ml }">
-        <div v-if="$slots.header" class="mc-table-card__header">
-            <!-- @slot Слот заголовка -->
-            <slot name="header" />
-        </div>
-        <div class="mc-table-card__body">
-            <!-- @slot Слот контента -->
-            <slot />
-        </div>
-        <div v-if="$slots.footer || footerBlur" :class="computedFooterClasses">
-            <!-- @slot Слот футера -->
-            <slot name="footer" />
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'McTableCard',
-    props: {
-        ml: {
-            type: String,
-            default: '251px',
-        },
-        footerBlur: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            bodyEl: null,
-            body_scrolled_to_bottom: true,
-        }
-    },
-    computed: {
-        computedFooterClasses() {
-            return {
-                'mc-table-card__footer': this.$slots.footer,
-                'mc-table-card__footer--with-blur': this.footerBlur && !this.body_scrolled_to_bottom,
-            }
-        },
-    },
-    watch: {
-        footerBlur(val) {
-            if (val) {
-                this.initBlur()
-            } else {
-                this.bodyEl && this.bodyEl.removeEventListener('scroll', this.handlerScroll)
-            }
-        },
-    },
-    mounted() {
-        if (this.footerBlur) {
-            this.initBlur()
-        }
-    },
-    beforeDestroy() {
-        this.bodyEl && this.bodyEl.removeEventListener('scroll', this.handlerScroll)
-    },
-    methods: {
-        initBlur() {
-            try {
-                this.body_scrolled_to_bottom = false
-                this.bodyEl = document.querySelector('.mc-table-card__body')
-                this.bodyEl && this.bodyEl.addEventListener('scroll', this.handlerScroll)
-            } catch (e) {
-                console.error(e)
-            }
-        },
-        handlerScroll(e) {
-            try {
-                this.body_scrolled_to_bottom = e.target.offsetHeight + e.target.scrollTop === e.target.scrollHeight
-            } catch (e) {
-                this.body_scrolled_to_bottom = true
-                console.error(e)
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-.mc-table-card {
-    $block-name: &;
-
-    @include position(absolute, 0);
-    z-index: 10;
-    background-color: $color-white;
-    border-inline-start: 1px solid $color-hover-gray;
-    display: flex;
-    flex-direction: column;
-    @include custom-scroll();
-
-    &__header {
-        height: $size-500;
-        border-bottom: 1px solid $color-hover-gray;
-        flex-shrink: 0;
-    }
-
-    &__body {
-        position: relative;
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        overflow-y: auto;
-    }
-
-    &__footer {
-        border-top: 1px solid $color-hover-gray;
-        flex-shrink: 0;
-        padding: $space-200;
-        @include child-indent-right($space-150);
-        &:empty {
-            display: none;
-        }
-        &--with-blur {
-            position: relative;
-            &::after {
-                @include pseudo;
-                height: $space-900;
-                background: linear-gradient(to top, $color-white, transparent);
-                position: absolute;
-                width: 100%;
-                inset-inline-start: 0;
-                bottom: 100%;
-                pointer-events: none;
-            }
-        }
-    }
-}
-</style>

package/src/patterns/McTableCard/McTableCardHeader/McTableCardHeader.vue

@@ -1,74 +0,0 @@
-<template>
-    <section class="mc-table-card-header">
-        <div class="mc-table-card-header__left">
-            <!-- @slot Слот контента -->
-            <slot>
-                <mc-button :to="backTo" exact variation="purple-link" size="xs">
-                    <mc-svg-icon slot="icon-prepend" name="keyboard_arrow_left" />
-                    {{ buttonBackText }}
-                </mc-button>
-            </slot>
-        </div>
-        <div class="mc-table-card-header__right">
-            <!-- @slot right -->
-            <slot name="right" />
-        </div>
-    </section>
-</template>
-
-<script>
-import McButton from '../../../elements/McButton/McButton'
-import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
-export default {
-    name: 'McTableCardHeader',
-    components: {
-        McButton,
-        McSvgIcon,
-    },
-    props: {
-        buttonBackText: {
-            type: String,
-            default: 'Back',
-        },
-        backTo: {
-            type: String,
-            default: '#',
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-table-card-header {
-    $block-name: &;
-
-    display: flex;
-    flex-wrap: nowrap;
-    background-color: $color-white;
-    padding: 0;
-    padding-inline: $space-150 $space-200;
-    align-items: center;
-    height: 100%;
-
-    &__left,
-    &__right {
-        @include layout-flex-fix();
-        display: flex;
-        flex-wrap: nowrap;
-        @include child-indent-right($space-200);
-
-        &:empty {
-            display: none;
-        }
-    }
-
-    &__left {
-        margin-inline-end: auto;
-    }
-
-    &__right {
-        margin-inline-start: auto;
-    }
-}
-</style>

package/src/patterns/McTopBar/McTopBar.vue

@@ -1,153 +0,0 @@
-<template>
-    <div class="mc-top-bar">
-        <div class="mc-top-bar__inner">
-            <div v-if="$slots.left" class="mc-top-bar__left">
-                <slot name="left" />
-            </div>
-            <div class="mc-top-bar__right">
-                <slot name="right" />
-                <mc-dropdown
-                    v-if="menuLangs && menuLangs.length"
-                    ref="menuLangs"
-                    v-model="localesDropdownOpen"
-                    list-min-width="auto"
-                    class="mc-top-bar__menu-langs"
-                >
-                    <mc-button slot="activator" variation="black-link" uppercase>
-                        {{ currentLang || defaultLang }}
-                        <mc-svg-icon slot="icon-append" class="rotate" name="arrow_drop_down" />
-                    </mc-button>
-                    <mc-dropdown-panel>
-                        <mc-button
-                            v-for="locale in menuLangs"
-                            :key="locale.name"
-                            :to="locale.to || locale.href"
-                            :exact="locale.exact"
-                            variation="black-flat"
-                            text-align="left"
-                            full-width
-                        >
-                            <mc-svg-icon slot="icon-prepend" :name="`flag_${locale.name.toLowerCase()}`" />
-                            {{ locale.name }}
-                        </mc-button>
-                    </mc-dropdown-panel>
-                </mc-dropdown>
-                <slot name="user">
-                    <mc-dropdown v-if="user" v-model="userDropdownOpen" position="right">
-                        <mc-button slot="activator" variation="white-flat" size="m-compact">
-                            <mc-avatar slot="icon-prepend" :src="user.avatar" rounded size="400" />
-                        </mc-button>
-                        <slot name="user-dropdown-panel" />
-                    </mc-dropdown>
-                </slot>
-            </div>
-        </div>
-        <mc-separator color="hover-gray" indent-top="100" />
-        <slot name="bottom" />
-    </div>
-</template>
-
-<script>
-import McAvatar from '../../elements/McAvatar/McAvatar'
-import McButton from '../../elements/McButton/McButton'
-import McSvgIcon from '../../elements/McSvgIcon/McSvgIcon'
-import McSeparator from '../../elements/McSeparator/McSeparator'
-import McDropdown from '../McDropdown/McDropdown'
-import McDropdownPanel from '../McDropdown/McDropdownPanel/McDropdownPanel'
-export default {
-    name: 'McTopBar',
-    components: {
-        McAvatar,
-        McButton,
-        McSvgIcon,
-        McSeparator,
-        McDropdown,
-        McDropdownPanel,
-    },
-    props: {
-        /**
-         *  Данные пользователя
-         *
-         */
-        user: {
-            type: Object,
-            default: null,
-        },
-        /**
-         *  Меню языков
-         *
-         */
-        menuLangs: {
-            type: Array,
-            default: () => [],
-        },
-        /**
-         *  Локализация или текст по умолчанию
-         *
-         */
-        defaultLang: {
-            type: String,
-            default: 'Выберите язык',
-        },
-        /**
-         *  Текущая локализация
-         *
-         */
-        currentLang: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            localesDropdownOpen: false,
-            userDropdownOpen: false,
-        }
-    },
-    watch: {
-        currentLang() {
-            this.localesDropdownOpen && this.$refs['menuLangs'] && this.$refs['menuLangs'].closeDropdown()
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/mixins';
-.mc-top-bar {
-    $block-name: &;
-
-    width: 100%;
-
-    &__inner {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: $space-100 $space-150 0 $space-150;
-        @include child-indent-right($space-100);
-    }
-
-    &__left,
-    &__right {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-        @include child-indent-right($space-100);
-    }
-
-    &__right {
-        min-width: 0;
-        flex: 1 1 auto;
-        justify-content: flex-end;
-    }
-    &__menu-langs {
-        .mc-svg-icon {
-            svg {
-                rect {
-                    stroke: $color-hover-gray;
-                }
-            }
-        }
-    }
-}
-</style>