mediacube-ui 0.1.346 → 0.1.347

package/src/elements/McProgress/McProgress.vue

@@ -1,218 +0,0 @@
-<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';
-.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

@@ -1,195 +0,0 @@
-<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';
-.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

@@ -1,143 +0,0 @@
-<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

@@ -1,157 +0,0 @@
-<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>