mediacube-ui 0.1.347 → 0.1.349

package/src/elements/McProgress/McProgress.vue

@@ -0,0 +1,223 @@
+<script>
+export default {
+    name: 'McProgress',
+    functional: true,
+    props: {
+        /**
+         *  Процент
+         *
+         */
+        percent: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         *  Число для отображения, если не укказано, используется процент
+         *
+         */
+        amount: {
+            type: [String, Number, Boolean],
+            default: null,
+        },
+        /**
+         *  Цвет
+         *
+         */
+        color: {
+            type: String,
+            default: 'dark-gray',
+        },
+        /**
+         *  Цвет текста
+         *
+         */
+        helpTextColor: {
+            type: String,
+            default: 'gray',
+        },
+        /**
+         *  Вспомогательный текст
+         */
+        helpText: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         *  Поменять местами подписи
+         */
+        reverseHeaders: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Использовать моноширинный шрифт для percent и amount
+         */
+        monospaceNumbers: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    render(h, { props, data }) {
+        const errorText = props.errors !== null && props.errors.length ? props.errors.join(', ') : ''
+        const wrapperClasses = {
+            'mc-progress': true,
+            'mc-progress--error': errorText,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            staticClasses.forEach(c => c && (wrapperClasses[c] = true))
+        }
+
+        let style = {}
+        if (props.color) style['--mc-progress-color'] = `var(--color-${props.color})`
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        const lineClasses = {
+            'mc-progress__line': true,
+        }
+
+        return h(
+            'div',
+            {
+                class: wrapperClasses,
+                style,
+            },
+            [
+                h(
+                    'div',
+                    {
+                        class: ['mc-progress__top', { 'mc-progress__top--reverse-headers': props.reverseHeaders }],
+                    },
+                    [
+                        h(
+                            'div',
+                            {
+                                class: {
+                                    'mc-progress__percent': true,
+                                    'mc-progress__percent--monospace': props.monospaceNumbers,
+                                },
+                            },
+                            [errorText ? 0 : props.amount || props.amount === 0 ? props.amount : `${props.percent}%`],
+                        ),
+                        props.helpText
+                            ? h(
+                                  'div',
+                                  {
+                                      class: ['mc-progress__help-text'],
+                                      style: {
+                                          ['--mc-progress-help-text-color']: `var(--color-${props.helpTextColor})`,
+                                      },
+                                  },
+                                  [props.helpText],
+                              )
+                            : null,
+                    ],
+                ),
+                h(
+                    'div',
+                    {
+                        class: 'mc-progress__wrapper-line',
+                    },
+                    [
+                        h('div', {
+                            class: lineClasses,
+                            style: { width: `${errorText ? 2 : Math.sign(props.percent) > 0 ? props.percent : 0}%` },
+                        }),
+                    ],
+                ),
+                errorText
+                    ? h(
+                          'div',
+                          {
+                              class: 'mc-progress__errors-container',
+                          },
+                          [errorText],
+                      )
+                    : null,
+            ],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../tokens/border-radius';
+@import '../../tokens/font-families';
+@import '../../tokens/colors';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-sizes';
+@import '../../tokens/sizes';
+@import '../../tokens/spacings';
+.mc-progress {
+    $block-name: &;
+    --mc-progress-color: #{$color-dark-gray};
+    --mc-progress-help-text-color: #{$color-gray};
+    position: relative;
+    width: 100%;
+    font-family: $font-family-main;
+    line-height: $line-height-200;
+    font-size: $font-size-200;
+    &__percent {
+        flex-shrink: 0;
+        color: var(--mc-progress-color);
+        &--monospace {
+            font-feature-settings: 'tnum';
+            font-variant-numeric: tabular-nums;
+        }
+    }
+    &--error {
+        #{$block-name} {
+            &__percent {
+                color: $color-red;
+            }
+            &__line {
+                background-color: $color-red;
+            }
+        }
+    }
+
+    &__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: $space-100;
+        &--reverse-headers {
+            flex-direction: row-reverse;
+        }
+    }
+
+    &__help-text {
+        color: var(--mc-progress-help-text-color);
+    }
+
+    &__wrapper-line {
+        height: $size-100;
+        border-radius: $radius-100;
+        background-color: $color-hover-gray;
+        width: 100%;
+    }
+
+    &__line {
+        height: 100%;
+        border-radius: $radius-100;
+        max-width: 100%;
+        background-color: var(--mc-progress-color);
+    }
+
+    &__errors-container {
+        margin-top: $space-150;
+        color: $color-red;
+    }
+}
+</style>

package/src/elements/McRangeSlider/McRangeSlider.vue

@@ -0,0 +1,199 @@
+<template>
+    <vue-slider
+        :class="classes"
+        :style="styles"
+        :value="newValue"
+        :dot-size="20"
+        :interval="step"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        :lazy="lazy"
+        :tooltip="tooltip"
+        :tooltip-placement="tooltipPlacement"
+        :tooltip-formatter="tooltipFormatter"
+        @change="handleInput"
+        @dragging="handleDrag"
+    />
+</template>
+
+<script>
+import VueSlider from 'vue-slider-component'
+import 'vue-slider-component/theme/default.css'
+
+export default {
+    name: 'McRangeSlider',
+    components: {
+        VueSlider,
+    },
+    props: {
+        /**
+         *  Значение
+         */
+        value: {
+            type: [Number, Array],
+            required: true,
+        },
+        /**
+         *  Мин. значение
+         */
+        min: {
+            type: Number,
+            required: true,
+        },
+        /**
+         *  Макс. значение
+         */
+        max: {
+            type: Number,
+            required: true,
+        },
+        /**
+         *  The interval between two values.
+         */
+        step: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         *  Цвет слайдера
+         */
+        color: {
+            type: String,
+            default: 'purple',
+        },
+        /**
+         *  Is it lazy to update the value.
+         *  Useful whenever you need to consume a high-loss operation
+         */
+        lazy: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         *  Whether to disable the component.
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Control Tooltip display.
+         *  'none' | 'always' | 'hover' | 'focus' | 'active'
+         */
+        tooltip: {
+            type: String,
+            default: 'hover',
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        tooltipPlacement: {
+            type: [String, Array],
+            default: 'top',
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        coloredTooltip: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            newValue: this.value,
+        }
+    },
+    computed: {
+        classes() {
+            return {
+                'mc-range-slider': true,
+                [`mc-range-slider--color-${this.color}`]: this.color,
+                'mc-range-slider--colored-tooltip': this.coloredTooltip,
+            }
+        },
+        styles() {
+            return {
+                ['--mc-range-slider-color']: `var(--color-${this.color})`,
+            }
+        },
+    },
+    methods: {
+        handleInput(value) {
+            /**
+             * Событие по изменению значения
+             * @property {Number}
+             */
+            this.$emit('input', value)
+        },
+        handleDrag(value) {
+            /**
+             * Событие по изменению значения
+             * (если нужно отслеживать value в ленивом режиме)
+             * @property {Number}
+             */
+            this.$emit('dragging', value)
+        },
+        tooltipFormatter(value) {
+            if (Number(value) !== value) return value
+            return ('' + value).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../tokens/box-shadows';
+@import '../../tokens/line-heights';
+@import '../../tokens/font-sizes';
+@import '../../tokens/spacings';
+@import '../../tokens/colors';
+.mc-range-slider {
+    $block-name: &;
+    --mc-range-slider-color: #{$color-purple};
+
+    .vue-slider-dot-tooltip-inner {
+        line-height: $line-height-200;
+        font-size: $font-size-200;
+        padding: $space-100 $space-150;
+        background-color: $color-black;
+        border-color: $color-black;
+    }
+    .vue-slider-process {
+        background-color: var(--mc-range-slider-color);
+    }
+
+    .vue-slider-dot-handle-focus {
+        box-shadow: $shadow-s;
+    }
+    .vue-slider-dot-handle {
+        box-shadow: $shadow-s;
+        &:hover {
+            border: 2px solid var(--mc-range-slider-color);
+        }
+        &:active {
+            border: 2px solid var(--mc-range-slider-color);
+        }
+    }
+    &--colored-tooltip {
+        .vue-slider-dot-tooltip-inner {
+            background-color: var(--mc-range-slider-color);
+            border-color: var(--mc-range-slider-color);
+            padding: $space-100 $space-150;
+        }
+    }
+    &.vue-slider {
+        .vue-slider-rail {
+            cursor: pointer;
+        }
+        &-disabled {
+            .vue-slider-rail {
+                cursor: auto;
+            }
+        }
+    }
+}
+</style>

package/src/elements/McSeparator/McSeparator.vue

@@ -0,0 +1,143 @@
+<script>
+export default {
+    name: 'McSeparator',
+    functional: true,
+    props: {
+        /**
+         * Толщина `s, m`
+         */
+        weight: {
+            type: String,
+            default: 's',
+        },
+        /**
+         * Цвет (токены)
+         */
+        color: {
+            type: String,
+            default: 'outline-gray',
+        },
+        /**
+         * Отступ слева и справа: 50, 200... ...1000
+         */
+        indentX: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху и снизу: 50, 200... ...1000
+         */
+        indentY: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху: 50, 200... ...1000
+         */
+        indentTop: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ снизу: 50, 200... ...1000
+         */
+        indentBottom: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ слева: 50, 200... ...1000
+         */
+        indentLeft: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ справа: 50, 200... ...1000
+         */
+        indentRight: {
+            type: String,
+            default: '',
+        },
+    },
+
+    render(h, { props, slots, data }) {
+        const indents = {
+            top: props.indentTop || props.indentY,
+            bottom: props.indentBottom || props.indentY,
+            left: props.indentLeft || props.indentX,
+            right: props.indentRight || props.indentX,
+        }
+        const classes = {
+            'mc-separator': true,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            staticClasses.forEach(c => c && (classes[c] = true))
+        }
+
+        let style = {}
+        if (props.color) style['--mc-separator-color'] = `var(--color-${props.color})`
+        if (indents.top) style['--mc-separator-indent-top'] = `var(--space-${indents.top})`
+        if (indents.bottom) style['--mc-separator-indent-bottom'] = `var(--space-${indents.bottom})`
+        if (indents.left) style['--mc-separator-indent-left'] = `var(--space-${indents.left})`
+        if (indents.right) style['--mc-separator-indent-right'] = `var(--space-${indents.right})`
+        let weight
+        switch (props.weight) {
+            case 's': {
+                weight = '1px'
+                break
+            }
+            case 'm': {
+                weight = '2px'
+            }
+        }
+        if (weight) style['--mc-separator-weight'] = weight
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        return h(
+            'div',
+            {
+                class: classes,
+                style,
+            },
+            [
+                h(
+                    'div',
+                    {
+                        class: 'mc-separator__wrapper',
+                    },
+                    slots()['default'],
+                ),
+            ],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/mixins';
+.mc-separator {
+    $block-name: &;
+    --mc-separator-color: initial;
+    --mc-separator-indent-top: initial;
+    --mc-separator-indent-bottom: initial;
+    --mc-separator-indent-left: initial;
+    --mc-separator-indent-right: initial;
+    --mc-separator-weight: initial;
+    width: 100%;
+    margin-top: var(--mc-separator-indent-top);
+    margin-bottom: var(--mc-separator-indent-bottom);
+    margin-inline-start: var(--mc-separator-indent-left);
+    margin-inline-end: var(--mc-separator-indent-right);
+    height: var(--mc-separator-weight);
+    &__wrapper {
+        @include size(100%);
+        background-color: var(--mc-separator-color);
+    }
+}
+</style>

package/src/elements/McSlideUpDown/McSlideUpDown.vue

@@ -0,0 +1,157 @@
+<script>
+/**
+ * Используется исключительно для mc-collapse
+ */
+export default {
+    name: 'McSlideUpDown',
+    props: {
+        /*
+         * Состояние
+         */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /*
+         * Продолжительность тоггла
+         */
+        duration: {
+            type: Number,
+            default: 500,
+        },
+        /*
+         * Если нужен другой тег
+         */
+        tag: {
+            type: String,
+            default: 'div',
+        },
+        /*
+         * Применять ли атрибут hidden
+         * к элементы при закрытии
+         */
+        useHidden: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    data: () => ({
+        style: {},
+        initial: false,
+        hidden: false,
+    }),
+
+    computed: {
+        el() {
+            return this.$refs.container
+        },
+
+        attrs() {
+            const attrs = {
+                'aria-hidden': !this.active,
+                'aria-expanded': this.active,
+            }
+
+            if (this.useHidden) {
+                attrs.hidden = this.hidden
+            }
+
+            return attrs
+        },
+    },
+
+    watch: {
+        active() {
+            this.layout()
+        },
+    },
+
+    mounted() {
+        this.layout()
+        this.initial = true
+    },
+
+    created() {
+        this.hidden = !this.active
+    },
+
+    methods: {
+        layout() {
+            if (this.active) {
+                this.hidden = false
+                /**
+                 * Событие перед началом открытия
+                 */
+                this.$emit('slide-open-start')
+                if (this.initial) {
+                    this.setHeight('0px', () => `${this.el.scrollHeight}px`)
+                }
+            } else {
+                /**
+                 * Событие перед началом закрытия
+                 */
+                this.$emit('slide-close-start')
+                this.setHeight(`${this.el.scrollHeight}px`, () => '0px')
+            }
+        },
+
+        asap(callback) {
+            if (!this.initial) {
+                callback()
+            } else {
+                this.$nextTick(callback)
+            }
+        },
+
+        setHeight(temp, afterRelayout) {
+            this.style = { height: temp }
+
+            this.asap(() => {
+                // force relayout so the animation will run
+                this.__ = this.el.scrollHeight
+
+                this.style = {
+                    height: afterRelayout(),
+                    overflow: 'hidden',
+                    'transition-property': 'height',
+                    'transition-duration': this.duration + 'ms',
+                }
+            })
+        },
+
+        onTransitionEnd() {
+            if (this.active) {
+                this.style = {}
+                /**
+                 * Событие после открытия
+                 */
+                this.$emit('slide-open-end')
+            } else {
+                this.style = {
+                    height: '0',
+                    overflow: 'hidden',
+                }
+                this.hidden = true
+                /**
+                 * Событие после закрытия
+                 */
+                this.$emit('slide-close-end')
+            }
+        },
+    },
+
+    render(h) {
+        return h(
+            this.tag,
+            {
+                style: this.style,
+                attrs: this.attrs,
+                ref: 'container',
+                on: { transitionend: this.onTransitionEnd },
+            },
+            this.$slots.default,
+        )
+    },
+}
+</script>