mediacube-ui 0.1.346 → 0.1.347

package/src/patterns/McFilter/McFilterChip/McFilterChip.vue

@@ -1,83 +0,0 @@
-<template>
-    <mc-chip :closable="closable" :variation="computedVariation" :class="classes" size="s" @click="handleChipClick">
-        <mc-title v-if="tag.categoryName" weight="semi-bold">{{ computedCategory }}</mc-title>
-        <mc-title v-if="tag.title">{{ tag.title }}</mc-title>
-    </mc-chip>
-</template>
-<script>
-import McTitle from '../../../elements/McTitle/McTitle'
-import McChip from '../../../elements/McChip/McChip'
-export default {
-    name: 'McFilterChip',
-    components: { McChip, McTitle },
-    props: {
-        /**
-         *  Объект тэга
-         */
-        tag: {
-            type: Object,
-            required: true,
-        },
-        /**
-         *  Закрывающийся
-         */
-        closable: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         *  Активный
-         */
-        isActive: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    computed: {
-        computedCategory() {
-            const append = this.tag.title ? ':' : ''
-            return `${this.tag.categoryName}${append}`
-        },
-        computedVariation() {
-            return this.closable ? 'purple-invert' : 'hover-gray'
-        },
-        classes() {
-            return {
-                'mc-filter-chip': true,
-                'mc-filter-chip--closable': this.closable,
-                'mc-filter-chip--is-active': this.isActive,
-            }
-        },
-    },
-    methods: {
-        handleChipClick(e) {
-            /**
-             * Событие по закрытию тэга
-             */
-            this.$emit('close')
-            e.stopPropagation()
-        },
-    },
-}
-</script>
-<style lang="scss">
-.mc-filter-chip {
-    $block-name: &;
-    border-radius: $space-50;
-
-    &--closable {
-        border-radius: $space-150;
-        &:hover {
-            cursor: pointer;
-            background-color: fade-out($color-purple, 0.6);
-        }
-    }
-    &--is-active {
-        background-color: fade-out($color-purple, 0.6);
-    }
-
-    .mc-title {
-        width: auto;
-    }
-}
-</style>

package/src/patterns/McFilter/McFilterTags/McFilterTags.vue

@@ -1,374 +0,0 @@
-<template>
-    <div class="mc-filter-tags">
-        <mc-title>{{ placeholders.added_filters }}</mc-title>
-        <div class="mc-filter-tags__body">
-            <div class="mc-filter-tags__body-left">
-                <mc-grid-row v-if="tagsWithoutFast.length" :gutter-x="4" :gutter-y="8">
-                    <mc-grid-col v-for="tag in tagsWithoutFast" :key="tag.id">
-                        <mc-filter-chip
-                            :tag="tag"
-                            :is-active="checkTagIsActive(tag)"
-                            closable
-                            @click.native="() => onTagClick(tag)"
-                            @close="() => onTagClose(tag)"
-                        />
-                    </mc-grid-col>
-                </mc-grid-row>
-                <template v-if="relationRows.length">
-                    <mc-grid-row v-for="(row, index) in relationRows" :key="index" :gutter-x="4" :gutter-y="8">
-                        <mc-grid-col v-for="tag in row" :key="tag.id">
-                            <mc-filter-chip
-                                :tag="tag"
-                                :is-active="checkTagIsActive(tag)"
-                                :closable="tag.closable"
-                                @click.native="() => onTagClick(tag)"
-                                @close="() => onTagClose(tag, row[0].relationKey)"
-                            />
-                        </mc-grid-col>
-                    </mc-grid-row>
-                </template>
-                <mc-grid-row v-if="fastFilterTags.length" :gutter-x="4" :gutter-y="8">
-                    <mc-grid-col v-for="tag in fastFilterTags" :key="tag.id">
-                        <mc-tooltip :content="tag.description || ''" placement="top" size="s">
-                            <mc-filter-chip :tag="tag" closable @close="() => onTagClose(tag)" />
-                        </mc-tooltip>
-                    </mc-grid-col>
-                </mc-grid-row>
-            </div>
-            <div class="mc-filter-tags__body-right">
-                <mc-button v-if="hasButtonClear" variation="dark-gray-outline" @click="handleClear">
-                    {{ placeholders.actions.clear }}
-                </mc-button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import _XEUtils from 'xe-utils'
-import _isEqual from 'lodash/isEqual'
-import _isEmpty from 'lodash/isEmpty'
-import _cloneDeep from 'lodash/cloneDeep'
-import { dayjs } from '../../../utils/dayjs'
-
-import McButton from '../../../elements/McButton/McButton'
-import McTooltip from '../../../elements/McTooltip/McTooltip'
-import McTitle from '../../../elements/McTitle/McTitle'
-import McGridRow from '../../../patterns/McGrid/McGridRow/McGridRow'
-import McGridCol from '../../../patterns/McGrid/McGridCol/McGridCol'
-import McFilterChip from '../McFilterChip/McFilterChip'
-export default {
-    name: 'McFilterTags',
-    components: {
-        McFilterChip,
-        McButton,
-        McTooltip,
-        McTitle,
-        McGridRow,
-        McGridCol,
-    },
-    props: {
-        /**
-         *  Данные фильтра
-         */
-        value: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-       *  Типы фильтров
-       *
-       *  [{
-                name: Filter title,
-                value: [String] - Filter value(key),
-                type: [String] - Filter type(relation / date / text / fast),
-                options: [Array] - Filter options,
-                getAjaxOne: [Function] - Method for get selected options when filter initialize,
-                getAjaxOptions: [Function] - Method for get options by API,
-                [default]: [String, Number, Boolean] - Only for fast filter type. Fast filter haven't options, we set default value
-                [description]: [String] - Only for fast filter type. Description of fast filter
-            }, ...]
-       */
-        filters: {
-            type: Array,
-            required: true,
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true,
-        },
-        /**
-         *  Активный тэг
-         */
-        activeTag: {
-            type: Object,
-            default: null,
-        },
-        useTimezone: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            simpleValues: {},
-            relationValues: {},
-            prettyActiveTag: null,
-        }
-    },
-    computed: {
-        fastFilterTags() {
-            return this.simpleTags.filter(st => st && st.type === 'fast')
-        },
-        tagsWithoutFast() {
-            return this.simpleTags.filter(st => st && st.type !== 'fast')
-        },
-        simpleTags() {
-            const tags = []
-            !_isEmpty(this.simpleValues) &&
-                Object.entries(this.simpleValues).forEach(([key, value]) => {
-                    const filter = this.filters.find(f => f.value === key)
-                    if (filter && filter.type === 'simple') {
-                        tags.push({
-                            id: _XEUtils.uniqueId(),
-                            categoryName: filter?.name,
-                            category: key,
-                            ...filter,
-                            title: filter.options.find(o => String(o.value) === String(value))?.name,
-                        })
-                    } else if (filter && filter.type === 'fast') {
-                        tags.push({
-                            id: _XEUtils.uniqueId(),
-                            categoryName: filter?.name,
-                            category: key,
-                            type: 'fast',
-                            ...filter,
-                        })
-                    } else if (filter) {
-                        const from = value.more
-                            ? `${this.placeholders.from} ${this.getFormattedVal(value.more, filter)}`
-                            : ''
-
-                        const to = value.less
-                            ? `${this.placeholders.to} ${this.getFormattedVal(
-                                  filter.type === 'date'
-                                      ? this.useTimezone
-                                          ? dayjs(value.less)
-                                                .subtract(1, 'days')
-                                                .format()
-                                          : dayjs(value.less).format()
-                                      : value.less,
-                                  filter,
-                              )}`
-                            : ''
-                        const space = from && to ? ' ' : ''
-                        const title = typeof value === 'object' ? `${from}${space}${to}`.toLowerCase() : value
-                        tags.push({
-                            id: _XEUtils.uniqueId(),
-                            categoryName: filter?.name,
-                            title,
-                            value,
-                            category: key,
-                        })
-                    }
-                })
-            return tags
-        },
-        relationRows() {
-            let tags = []
-            if (!_isEmpty(this.relationValues)) {
-                tags = Object.entries(this.relationValues).map(([relationKey, relationVal]) => {
-                    if (relationKey === 'exists') {
-                        const empties = Object.keys(relationVal).map(key => {
-                            const filter = this.filters.find(f => f.value === key)
-                            return {
-                                id: _XEUtils.uniqueId(),
-                                categoryName: filter?.name,
-                                value: key,
-                                category: key,
-                                relationKey,
-                                closable: true,
-                            }
-                        })
-                        const head = {
-                            id: _XEUtils.uniqueId(),
-                            categoryName: this.placeholders.actions.empty,
-                            relationKey: 'exists',
-                        }
-                        return [head, ...empties]
-                    }
-                    const values = []
-                    Object.entries(relationVal).forEach(([categoryKey, categoryVal]) => {
-                        const filter = this.filters.find(f => f.value === categoryKey)
-                        Object.entries(categoryVal).forEach(([key, val]) => {
-                            values.push({
-                                id: _XEUtils.uniqueId(),
-                                categoryName: filter?.name,
-                                title: val,
-                                value: key,
-                                category: categoryKey,
-                                relationKey,
-                                closable: true,
-                            })
-                        })
-                    })
-                    const head = {
-                        id: _XEUtils.uniqueId(),
-                        categoryName: this.placeholders.actions[relationKey],
-                        relationKey,
-                    }
-                    return [head, ...values]
-                })
-            }
-            return tags.filter(t => t.length > 1)
-        },
-        hasButtonClear() {
-            return this.relationRows.length || this.simpleTags.length
-        },
-    },
-    watch: {
-        value: {
-            handler(val) {
-                this.splitTags(val)
-            },
-            immediate: true,
-            deep: true,
-        },
-        activeTag: {
-            handler(val) {
-                this.prettyActiveTag = val
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        splitTags(value) {
-            this.simpleValues = {}
-            this.relationValues = {}
-            if (_isEmpty(value)) return
-            this.addInitTags(value)
-        },
-        addInitTags(parentVal, parentKey = null) {
-            const relationKeys = ['is', 'is_not', 'exists']
-            for (let [key, val] of Object.entries(parentVal)) {
-                if (relationKeys.includes(key)) {
-                    const relationValuesKey = {
-                        ...(key in this.relationValues ? this.relationValues[key] : {}),
-                        ...(parentKey ? { [parentKey]: val } : {}),
-                    }
-                    this.$set(this.relationValues, key, relationValuesKey)
-                    continue
-                }
-                if (typeof val !== 'object' && parentKey) {
-                    this.$set(this.simpleValues, parentKey, parentVal)
-                    continue
-                }
-                const filter = this.filters.find(f => f.value === key)
-                if (filter && filter.type === 'fast') {
-                    this.$set(this.simpleValues, key, { value: key })
-                    continue
-                }
-                val && this.addInitTags(val, key)
-            }
-        },
-        onTagClick(tag) {
-            this.prettyActiveTag = _isEqual(this.prettyActiveTag, tag) ? null : tag
-            /**
-             * Событие по клику на тэг
-             */
-            this.$emit('tag-click', tag)
-        },
-        onTagClose(tag, relationKey = null) {
-            const value = _cloneDeep(this.value)
-            switch (relationKey) {
-                case 'exists':
-                    delete value[tag.category][relationKey]
-                    break
-                case 'is':
-                case 'is_not':
-                    delete value[tag.category][relationKey][tag.value]
-                    if (_isEmpty(value[tag.category][relationKey])) {
-                        delete value[tag.category][relationKey]
-                    }
-                    break
-                default:
-                    delete value[tag.category]
-                    break
-            }
-
-            if (_isEmpty(value[tag.category])) {
-                delete value[tag.category]
-            }
-            /**
-             * Событие по изменению набора тэгов
-             */
-            this.$emit('tag-change', value)
-        },
-        handleClear() {
-            /**
-             * Событие по очистке всех тэгов
-             */
-            this.$emit('clear')
-        },
-        getFormattedVal(val, filter) {
-            switch (filter.type) {
-                case 'date':
-                    return dayjs(val).format('DD.MM.YYYY')
-                case 'range':
-                    return this.getFormattedNum(val)
-                default:
-                    return val
-            }
-        },
-        getFormattedNum(num) {
-            const numeral = require('numeral')
-            if (!numeral) return num
-            let decimalsString = ''.padStart(0, '0')
-            return numeral(num)
-                .format('0,0.' + decimalsString)
-                .replace(/,/g, ' ')
-        },
-        checkTagIsActive(tag) {
-            return _isEqual(this.prettyActiveTag, tag)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-filter-tags {
-    $block-name: &;
-
-    @include child-indent-bottom($space-100);
-    &__body {
-        display: flex;
-        justify-content: space-between;
-        padding: $space-100;
-        border: 1px solid $color-outline-gray;
-        border-radius: $radius-100;
-        background-color: $color-white;
-        min-height: $space-500;
-        overflow-x: auto;
-        &-left {
-            flex-grow: 1;
-        }
-        &-right {
-            margin-inline-start: $space-100;
-            .mc-button {
-                padding: $space-50 $space-150;
-                height: $space-300;
-            }
-        }
-
-        .mc-grid-row {
-            &:not(:last-child) {
-                margin-bottom: $space-50 !important;
-            }
-        }
-    }
-}
-</style>

package/src/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.vue

@@ -1,70 +0,0 @@
-<template>
-    <mc-date-picker
-        v-model="period"
-        :placeholders="placeholders.calendar"
-        :placeholder="filter.placeholder || placeholders.choose"
-        :use-timezone="useTimezone"
-        name="condition_dates"
-        class="mc-filter-type-date"
-        range
-    />
-</template>
-
-<script>
-import McDatePicker from '../../../elements/McDatePicker/McDatePicker'
-export default {
-    name: 'McFilterTypeDate',
-    components: {
-        McDatePicker,
-    },
-    props: {
-        /**
-         *  Значение
-         */
-        value: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-         *  Объект выбранного
-         *  фильтра
-         */
-        filter: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true,
-        },
-        useTimezone: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    computed: {
-        period: {
-            get() {
-                return this.value ? [this.value.more, this.value.less] : []
-            },
-            set(val) {
-                const period = (val || []).every(d => !!d?.trim()?.length) ? { more: val[0], less: val[1] } : {}
-                /**
-                 * Событие по изменению периода
-                 */
-                this.$emit('input', period)
-            },
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.mc-filter-type-Date {
-    $block-name: &;
-    width: 300px;
-}
-</style>

package/src/patterns/McFilter/McFilterTypeRange/McFilterTypeRange.vue

@@ -1,132 +0,0 @@
-<template>
-    <div class="mc-filter-type-range">
-        <mc-field-text v-model="more" :placeholder="placeholders.from.toLowerCase()" type="number" name="range_more" />
-        <mc-field-text v-model="less" :placeholder="placeholders.to.toLowerCase()" type="number" name="range_less" />
-    </div>
-</template>
-
-<script>
-import McFieldText from '../../../elements/McField/McFieldText/McFieldText'
-export default {
-    name: 'McFilterTypeRange',
-    components: {
-        McFieldText,
-    },
-    props: {
-        /**
-         *  Значение
-         */
-        value: {
-            type: Object,
-            default: () => {
-                return {
-                    more: null,
-                    less: null,
-                }
-            },
-        },
-        /**
-         *  Объект выбранного
-         *  фильтра
-         */
-        filter: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            currentMore: null,
-            currentLess: null,
-        }
-    },
-    computed: {
-        more: {
-            get() {
-                return this.value && this.value.more
-            },
-            set(val) {
-                this.currentMore = val
-                this.emitValue()
-            },
-        },
-        less: {
-            get() {
-                return this.value && this.value.less
-            },
-            set(val) {
-                this.currentLess = val
-                this.emitValue()
-            },
-        },
-    },
-    watch: {
-        value: {
-            handler(val) {
-                if (val) {
-                    this.currentMore = this.value ? this.value.more : null
-                    this.currentLess = this.value ? this.value.less : null
-                }
-            },
-            deep: true,
-        },
-    },
-    methods: {
-        emitValue() {
-            const hasMore = this.hasValue(this.currentMore)
-            const hasLess = this.hasValue(this.currentLess)
-            const hasMin = this.hasValue(this.filter.min)
-            const hasMax = this.hasValue(this.filter.max)
-
-            let more = hasMore ? Number(this.currentMore) : null
-            let less = hasLess ? Number(this.currentLess) : null
-
-            if (more < this.filter.min && hasMin) {
-                more = this.filter.min
-            }
-            if (less > this.filter.max && hasMax) {
-                less = this.filter.max
-            }
-            if (more > this.filter.max && hasMax) {
-                more = this.filter.max
-            }
-            if (less < this.filter.min && hasMin) {
-                less = this.filter.min
-            }
-            const result = {
-                ...(hasMore ? { more } : {}),
-                ...(hasLess ? { less } : {}),
-            }
-            this.currentLess = less
-            this.currentMore = more
-
-            /**
-             * Событие по изменению интервала
-             */
-            this.$emit('input', result)
-        },
-        hasValue(val) {
-            return val || Number.isInteger(val)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-filter-type-range {
-    $block-name: &;
-    display: flex;
-    @include child-indent-right($space-100);
-    .mc-field-text {
-        width: 146px;
-    }
-}
-</style>