mediacube-ui 0.1.7

package/src/patterns/McTable/McTableCol/McTableCol.stories.js

@@ -0,0 +1,20 @@
+import McTableCol from './McTableCol'
+
+export default {
+  title: 'Patterns/McTable/McTableCol',
+  component: McTableCol,
+  parameters: {
+    componentSubtitle: 'Status: In Progress',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=346%3A1828',
+    },
+  },
+}
+
+// mc-tab default
+export const Default = () => ({
+  template: `<div> Смотреть <a href="/?path=/story/patterns-mctable--default">McTable</a></div>`,
+})
+
+

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

@@ -0,0 +1,282 @@
+<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">
+                    {{ $attrs.type === 'seq' ? rowIndex + 1 : row[defaultTitle] }}
+                </mc-title>
+            </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">
+                            {{ 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">
+                {{ items[columnIndex] }}{{ totalAppend }}
+            </mc-title>
+            <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: {
+                    modifyTotal: this.modifyTotal,
+                },
+            }
+        },
+        defaultTitle() {
+            return this.$attrs.field
+        },
+        textAlign() {
+            return this.$attrs.align || 'left'
+        },
+        totalAppend() {
+            return this.$attrs['total-append'] || ''
+        },
+        isSortable() {
+            return this.$attrs.hasOwnProperty('sortable') && this.$attrs.sortable !== false
+        },
+        ellipsis() {
+            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.nativeSort) {
+                if (this.provideData.sortedBy && column.property === this.provideData.sortedBy) {
+                    return this.provideData.sortedDescending ? 'arrow_downward' : 'arrow_upward'
+                }
+                return 'arrow_up_down'
+            }
+            if (!column.order) return 'arrow_up_down'
+            return column.order === 'desc' ? 'arrow_downward' : 'arrow_upward'
+        },
+        getSortColor(column) {
+            if (!this.provideData.nativeSort) {
+                if (this.provideData.sortedBy && column.property === this.provideData.sortedBy) {
+                    return 'black'
+                }
+                return 'outline-gray'
+            }
+            return column.order ? 'black' : '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 '~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-right: 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-left: auto;
+        color: $color-gray;
+    }
+
+    &__title {
+        width: auto;
+        max-width: 101%;
+    }
+    &__header-append {
+        display: flex;
+        align-items: center;
+    }
+    &__right {
+        display: 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;
+    }
+}
+
+.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 {
+            display: flex;
+        }
+        @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.stories.js

@@ -0,0 +1,108 @@
+import { text, boolean } from '@storybook/addon-knobs'
+
+import McTableCard from './McTableCard'
+import McTableCardHeader from './McTableCardHeader/McTableCardHeader'
+import McTitle from '../../elements/McTitle/McTitle'
+import McSvgIcon from '../../elements/McSvgIcon/McSvgIcon'
+import McButton from '../../elements/McButton/McButton'
+import McRoot from '../../templates/layouts/McRoot/McRoot'
+
+const wrapper = () => {
+    return {
+        template: `<div style="position: relative; margin-bottom: -3rem; height: calc(100vh - 3rem); width: 100%;">
+        <story />
+    </div>`,
+    }
+}
+
+export default {
+    title: 'Patterns/McTableCard/McTableCard',
+    component: McTableCard,
+    subcomponents: { McTableCardHeader },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/3gG13Y8ShNTZBxA0GBU40U/Dashboard-Panel?node-id=268%3A66',
+        },
+    },
+    decorators: [wrapper],
+}
+
+export const Default = () => ({
+    components: { McTableCard, McTableCardHeader, McTitle, McSvgIcon, McButton, McRoot },
+    props: {
+        ml: {
+            default: text('ml (margin-left)', '100px', 'default'),
+        },
+        hasSlotFooter: {
+            default: boolean('slot footer', true, 'default'),
+        },
+    },
+    methods: {
+        getCardTopPos() {
+            const cards = document.getElementsByClassName('mc-table-card')
+            return cards.length ? cards[0].getBoundingClientRect().top : 0
+        },
+        showChat() {
+            this.panelResult = this.$showPanel({
+                component: 'McChat',
+                width: '320px',
+                openOn: 'right',
+                hideBg: true,
+                removeBg: false,
+                disableBgClick: false,
+                keepAlive: false,
+                props: {
+                    title: 'Chat',
+                    emptyMessage: 'History is clear',
+                    showInput: true,
+                    value: '',
+                    // loading: this.loading,
+                    editable: true,
+                    avatar: 'https://avatars3.githubusercontent.com/u/43079603?s=460&v=4',
+                    comments: [],
+                    indentTop: this.getCardTopPos(),
+                },
+            })
+        },
+    },
+    template: `<mc-root>
+      <mc-table-card :ml="ml">
+      <mc-table-card-header slot="header" button-back-text="Back to list">
+        <template slot="right">
+          <mc-button variation="purple-link" size="xs">
+            Add channel
+            <mc-svg-icon slot="icon-append" name="add" />
+          </mc-button>
+          <mc-button variation="purple-link" size="xs">
+            Amount
+            <mc-svg-icon slot="icon-append" name="edit_solid" />
+          </mc-button>
+          <mc-button variation="purple-link" size="xs" @click.prevent="showChat">
+            Chat
+            <mc-svg-icon slot="icon-append" name="chat" />
+          </mc-button>
+        </template>
+      </mc-table-card-header>
+      <mc-title v-for="num in 3" class="mb-200" :key="num" :ellipsis="false">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consectetur magnam possimus rerum! 
+        Cupiditate delectus dolor earum eos eum id inventore, itaque, labore molestiae nobis nulla odio perspiciatis 
+        quidem quisquam repudiandae sint temporibus veritatis. Distinctio illo iusto voluptas! Adipisci animi aut cum 
+        eius error esse ex hic impedit itaque labore laboriosam natus neque nisi odio porro qui quisquam repellat 
+        repellendus, saepe suscipit! At delectus deserunt dicta distinctio modi pariatur perspiciatis quos sed velit 
+        voluptates? Ab aliquam assumenda corporis dicta incidunt nihil obcaecati quibusdam quidem? Ad amet at consequuntur 
+        cupiditate dolorem, doloribus eaque eius, enim est eum eveniet ex facilis incidunt ipsum minima modi molestias 
+        mollitia, provident quae quam repellat reprehenderit sequi similique suscipit tenetur ullam vero voluptates! 
+        Dolore est excepturi laboriosam magnam, odit pariatur. Aliquid animi architecto autem consectetur corporis 
+        debitis distinctio dolor eius eum exercitationem explicabo id incidunt inventore libero maiores, modi mollitia 
+        nemo, nostrum numquam quis quod tempora ut veritatis?
+      </mc-title>
+      <template v-if="hasSlotFooter" slot="footer">
+        <mc-button>Apply</mc-button>
+        <mc-button variation="red-invert">Block</mc-button>
+        <mc-button disabled>Disabled button</mc-button>
+      </template>
+    </mc-table-card>
+  </mc-root>`,
+})

package/src/patterns/McTableCard/McTableCard.vue

@@ -0,0 +1,134 @@
+<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">
+.mc-table-card {
+    $block-name: &;
+
+    @include position(absolute, 0);
+    z-index: 10;
+    background-color: $color-white;
+    border-left: 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%;
+                left: 0;
+                bottom: 100%;
+                pointer-events: none;
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McTableCard/McTableCardHeader/McTableCardHeader.stories.js

@@ -0,0 +1,70 @@
+import { text, boolean } from '@storybook/addon-knobs'
+
+import McTableCardHeader from './McTableCardHeader'
+import McButton from '../../../elements/McButton/McButton'
+import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
+
+export default {
+    title: 'Patterns/McTableCard/McTableCardHeader',
+    component: McTableCardHeader,
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/3gG13Y8ShNTZBxA0GBU40U/Dashboard-Panel?node-id=268%3A66',
+        },
+    },
+}
+
+const getUniqueProps = key => {
+    return {
+        buttonBackText: {
+            default: text('buttonBackText', 'Previously', key),
+        },
+        backTo: {
+            default: text('backTo', '#', key),
+        },
+    }
+}
+
+const getCommonTags = ctx => {
+    return {
+        buttonBackText: ctx.buttonBackText,
+        backTo: ctx.backTo,
+    }
+}
+
+export const Default = () => ({
+    components: { McTableCardHeader, McButton, McSvgIcon },
+    computed: {
+        tagBind() {
+            return getCommonTags(this)
+        },
+    },
+    props: {
+        ...getUniqueProps('default'),
+        hasSlotLeft: {
+            default: boolean('slot left', false, 'default'),
+        },
+        hasSlotRight: {
+            default: boolean('slot right', true, 'default'),
+        },
+    },
+    template: `<mc-table-card-header v-bind="tagBind">
+    <mc-button v-if="hasSlotLeft" uppercase variation="blue-link">Back to list</mc-button>
+    <template v-if="hasSlotRight" slot="right">
+      <mc-button variation="purple-link" size="xs">
+        Add channel
+        <mc-svg-icon slot="icon-append" name="add" />
+      </mc-button>
+      <mc-button variation="purple-link" size="xs">
+        Amount
+        <mc-svg-icon slot="icon-append" name="edit_solid" />
+      </mc-button>
+      <mc-button variation="purple-link" size="xs">
+        Chat
+        <mc-svg-icon slot="icon-append" name="chat" />
+      </mc-button>
+    </template>
+  </mc-table-card-header>`,
+})

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

@@ -0,0 +1,72 @@
+<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">
+.mc-table-card-header {
+    $block-name: &;
+
+    display: flex;
+    flex-wrap: nowrap;
+    background-color: $color-white;
+    padding: 0 $space-200 0 $space-150;
+    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-right: auto;
+    }
+
+    &__right {
+        margin-left: auto;
+    }
+}
+</style>