mediacube-ui 0.1.345 → 0.1.347

package/src/patterns/McFilter/McFilterTypeRelation/McFilterTypeRelation.vue

@@ -1,221 +0,0 @@
-<template>
-    <component
-        :is="component"
-        v-model="selectedOptionValue"
-        :options="computedOptions"
-        :internal-search="!isAjax"
-        :placeholder="computedPlaceholder"
-        :loading="loading"
-        :disabled="relationType === 'exists'"
-        hide-selected
-        class="mc-filter-type-relation"
-        name="relation_select"
-        @search-change="handleSearchChange"
-    >
-        <div slot="header" class="mc-filter-type-relation__header">
-            <mc-title>{{ placeholders.condition }}</mc-title>
-            <div class="mc-filter-type-relation__buttons">
-                <mc-button
-                    v-for="relation in relations"
-                    :key="relation"
-                    :variation="relationType === relation ? 'purple' : 'dark-gray-outline'"
-                    @click="() => changeRelationType(relation)"
-                >
-                    {{ placeholders.actions[`${relation === 'exists' ? 'empty' : relation}`] }}
-                </mc-button>
-            </div>
-        </div>
-    </component>
-</template>
-
-<script>
-import _uniqWith from 'lodash/uniqWith'
-import _isEqual from 'lodash/isEqual'
-import _debounce from 'lodash/debounce'
-import _isEmpty from 'lodash/isEmpty'
-import McButton from '../../../elements/McButton/McButton'
-import McTitle from '../../../elements/McTitle/McTitle'
-import McFieldSelect from '../../../elements/McField/McFieldSelect/McFieldSelect'
-import McFieldText from '../../../elements/McField/McFieldText/McFieldText'
-
-export default {
-    name: 'McFilterTypeRelation',
-    components: {
-        McButton,
-        McTitle,
-        McFieldSelect,
-        McFieldText,
-    },
-    props: {
-        /**
-         *  Значение
-         */
-        value: {
-            // type: [String, Number],
-            default: null,
-        },
-        /**
-         *  Объект выбранного
-         *  фильтра
-         */
-        filter: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true,
-        },
-        /**
-         *  Текущее значение
-         *  добавленных фильтров
-         */
-        currentValues: {
-            type: Object,
-            default: () => {},
-        },
-    },
-    data() {
-        return {
-            relations: ['is', 'is_not', 'exists'],
-            relationType: 'is',
-            ajaxOptions: [],
-            loading: false,
-        }
-    },
-    computed: {
-        component() {
-            return this.filter.is_text ? 'mc-field-text' : 'mc-field-select'
-        },
-        computedPlaceholder() {
-            return this.filter.placeholder || this.filter.is_text ? this.placeholders.enter : this.placeholders.choose
-        },
-        computedOptions() {
-            let options = this.isAjax ? this.ajaxOptions : this.filter.options || []
-
-            if (!_isEmpty(this.currentValues) && this.filter.value in this.currentValues) {
-                const category = this.currentValues[this.filter.value]
-                let selected = []
-                for (let [key, val] of Object.entries(category)) {
-                    if (key === 'exists') {
-                        return []
-                    }
-                    selected = [...selected, ...(Array.isArray(val) ? val : [[val]])]
-                }
-                options = options.filter(o => !selected.includes(String(o.value)))
-            }
-
-            return options
-        },
-        isAjax() {
-            return typeof this.filter.getAjaxOptions === 'function'
-        },
-        selectedOptionValue: {
-            get() {
-                let val = this.value
-                if (val) {
-                    for (let [relationKey, relationVal] of Object.entries(this.value)) {
-                        if (relationKey === 'exists') {
-                            val = null
-                        } else {
-                            val = relationVal[0]
-                        }
-                    }
-                    if (this.isAjax && val) {
-                        this.addAjaxOption(val)
-                    }
-                }
-                return val
-            },
-            set(val) {
-                if (this.relationType === 'exists') return
-                this.setValue(val)
-            },
-        },
-    },
-    watch: {
-        value: {
-            handler(val) {
-                if (val) {
-                    for (let relationKey of Object.keys(val)) {
-                        this.relationType = relationKey
-                    }
-                }
-            },
-            immediate: true,
-        },
-        filter() {
-            this.relationType = 'is'
-            this.$nextTick(() => (this.ajaxOptions = []))
-        },
-    },
-    methods: {
-        changeRelationType(relation) {
-            if (this.relationType === relation) return
-            this.relationType = relation
-            this.setValue(this.selectedOptionValue)
-        },
-        async setAjaxOptions(value) {
-            this.loading = true
-            this.ajaxOptions = await this.filter.getAjaxOptions(value)
-            this.loading = false
-        },
-        async addAjaxOption(value) {
-            const option = await this.filter.getAjaxOne(value)
-            this.ajaxOptions = _uniqWith([...this.ajaxOptions, option], _isEqual)
-        },
-        handleSearchChange(value) {
-            if (!this.isAjax || !value) return
-            this.debounceHandler(this.setAjaxOptions.bind(null, value))
-        },
-        debounceHandler: _debounce(method => method(), 500),
-        setValue(value) {
-            let currentValue = null
-            let currentValueName = null
-            const hasVal = value || Number.isInteger(value)
-            if (this.relationType !== 'exists' && hasVal) {
-                const name = this.filter.is_text
-                    ? value
-                    : this.computedOptions.find(o => String(o.value) === String(value))?.name
-                currentValue = { [this.relationType]: [String(value)] }
-                currentValueName = { [this.relationType]: { [String(value)]: name } }
-            }
-
-            if (this.relationType === 'exists' && !this.currentValues[this.filter.value]) {
-                currentValue = { ['exists']: [0] }
-                currentValueName = { ['exists']: [0] }
-            }
-            /**
-             * Событие по изменению значения
-             */
-            this.$emit('input', currentValue, currentValueName)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-filter-type-relation {
-    $block-name: &;
-    width: 300px;
-    &__header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: -$space-50;
-        margin-top: -$space-50;
-    }
-    &__buttons {
-        display: flex;
-        @include child-indent-right($space-50);
-        .mc-button {
-            height: $size-300;
-            padding: $space-50 $space-150;
-        }
-    }
-}
-</style>

package/src/patterns/McFilter/McFilterTypeSimple/McFilterTypeSimple.vue

@@ -1,161 +0,0 @@
-<template>
-    <mc-field-select
-        v-model="selectedOptionValue"
-        :options="computedOptions"
-        :internal-search="!isAjax"
-        :placeholder="computedPlaceholder"
-        :loading="loading"
-        class="mc-filter-type-simple"
-        name="simple_select"
-        @search-change="handleSearchChange"
-    >
-        <div slot="header" class="mc-filter-type-simple__header">
-            <mc-title>{{ placeholders.simple }}</mc-title>
-        </div>
-    </mc-field-select>
-</template>
-
-<script>
-import _uniqWith from 'lodash/uniqWith'
-import _isEqual from 'lodash/isEqual'
-import _debounce from 'lodash/debounce'
-import _isEmpty from 'lodash/isEmpty'
-import McTitle from '../../../elements/McTitle/McTitle'
-import McFieldSelect from '../../../elements/McField/McFieldSelect/McFieldSelect'
-
-export default {
-    name: 'McFilterTypeSimple',
-    components: {
-        McTitle,
-        McFieldSelect,
-    },
-    props: {
-        /**
-         *  Значение
-         */
-        value: {
-            // type: [String, Number],
-            default: null,
-        },
-        /**
-         *  Объект выбранного
-         *  фильтра
-         */
-        filter: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true,
-        },
-        /**
-         *  Текущее значение
-         *  добавленных фильтров
-         */
-        currentValues: {
-            type: Object,
-            default: () => {},
-        },
-        asd: {
-            type: Object,
-            default: () => {},
-        },
-    },
-    data() {
-        return {
-            ajaxOptions: [],
-            loading: false,
-        }
-    },
-    computed: {
-        computedPlaceholder() {
-            return this.filter.placeholder || this.filter.is_text ? this.placeholders.enter : this.placeholders.choose
-        },
-        computedOptions() {
-            let options = this.isAjax ? this.ajaxOptions : this.filter.options || []
-
-            if (!_isEmpty(this.currentValues) && this.filter.value in this.currentValues) {
-                const category = this.currentValues[this.filter.value]
-                let selected = []
-                for (let [key, val] of Object.entries(category)) {
-                    selected = [...selected, ...(Array.isArray(val) ? val : [[val]])]
-                }
-                options = options.filter(o => !selected.includes(String(o.value)))
-            }
-
-            return options
-        },
-        isAjax() {
-            return typeof this.filter.getAjaxOptions === 'function'
-        },
-        selectedOptionValue: {
-            get() {
-                let val = this.value
-                if (val) {
-                    if (this.isAjax && val) {
-                        this.addAjaxOption(val)
-                    }
-                }
-                return val
-            },
-            set(val) {
-                this.setValue(val)
-            },
-        },
-    },
-    watch: {
-        filter() {
-            this.$nextTick(() => (this.ajaxOptions = []))
-        },
-    },
-    methods: {
-        async setAjaxOptions(value) {
-            this.loading = true
-            this.ajaxOptions = await this.filter.getAjaxOptions(value)
-            this.loading = false
-        },
-        async addAjaxOption(value) {
-            const option = await this.filter.getAjaxOne(value)
-            this.ajaxOptions = _uniqWith([...this.ajaxOptions, option], _isEqual)
-        },
-        handleSearchChange(value) {
-            if (!this.isAjax || !value) return
-            this.debounceHandler(this.setAjaxOptions.bind(null, value))
-        },
-        debounceHandler: _debounce(method => method(), 500),
-        setValue(value) {
-            /**
-             * Событие по изменению значения
-             */
-            this.$emit('input', value, this.computedOptions.find(o => String(o.value) === String(value))?.name)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-@import '../../../styles/mixins';
-.mc-filter-type-simple {
-    $block-name: &;
-    width: 300px;
-    &__header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: -$space-50;
-        margin-top: -$space-50;
-    }
-    &__buttons {
-        display: flex;
-        @include child-indent-right($space-50);
-        .mc-button {
-            height: $size-300;
-            padding: $space-50 $space-150;
-        }
-    }
-}
-</style>

package/src/patterns/McFilter/McFilterTypeText/McFilterTypeText.vue

@@ -1,62 +0,0 @@
-<template>
-    <mc-field-text
-        v-model="text"
-        :placeholder="filter.placeholder || placeholders.enter"
-        class="mc-filter-type-text"
-        name="condition_text"
-    />
-</template>
-
-<script>
-import McFieldText from '../../../elements/McField/McFieldText/McFieldText'
-export default {
-    name: 'McFilterTypeText',
-    components: {
-        McFieldText,
-    },
-    props: {
-        /**
-         *  Значение
-         */
-        value: {
-            type: String,
-            default: '',
-        },
-        /**
-         *  Объект выбранного
-         *  фильтра
-         */
-        filter: {
-            type: Object,
-            default: () => {},
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        text: {
-            get() {
-                return this.value
-            },
-            set(val) {
-                /**
-                 * Событие по изменению значения
-                 */
-                this.$emit('input', val)
-            },
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.mc-filter-type-text {
-    $block-name: &;
-    width: 300px;
-}
-</style>

package/src/patterns/McGrid/McGridCol/McGridCol.vue

@@ -1,165 +0,0 @@
-<template>
-    <div :class="classes" :style="styles" class="mc-grid-col">
-        <!-- @slot Слот контента -->
-        <slot />
-    </div>
-</template>
-
-<script>
-import _upperFirst from 'lodash/upperFirst'
-const values = ['span', 'order', 'offset', 'push', 'pull']
-const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl']
-const props = {}
-
-values.forEach(value => {
-    sizes.forEach(size => {
-        props[`${value}-${size}`] = { type: Number }
-    })
-})
-
-export default {
-    name: 'McGridCol',
-    inject: ['provideData'],
-    props: {
-        /**
-         *  Кол-во колонок (всего 12)
-         */
-        span: { type: Number },
-
-        /**
-         *  Очерёдность
-         */
-        order: { type: Number },
-
-        /**
-         *  Отступ (margin-left)
-         */
-        offset: { type: Number },
-
-        /**
-         *  Отступ (left)
-         */
-        push: { type: Number },
-
-        /**
-         *  Отступ (right)
-         */
-        pull: { type: Number },
-
-        ...props,
-
-        /**
-         *  Автоматически тянущаяся колонка
-         *  на всё свободное пространство
-         */
-        stretchSelf: {
-            type: Boolean,
-            default: false,
-        },
-
-        /**
-         *  Основа флекса, которая является начальным размером элемента
-         *  (указывать с единицами измерения: px, %...)
-         */
-        basis: {
-            type: String,
-            default: 'auto',
-        },
-    },
-
-    computed: {
-        classes() {
-            const list = {}
-            values.forEach(value => {
-                list[`mc-grid-col--${value}-${this[value]}`] = this[value]
-                sizes.forEach(size => {
-                    const sizeValue = this[`${value}${_upperFirst(size)}`]
-                    list[`mc-grid-col--${value}-${size}-${sizeValue}`] = sizeValue
-                })
-            })
-            return list
-        },
-
-        styles() {
-            let colStyle = {}
-
-            if (this.provideData.gutterX !== 0) {
-                colStyle['padding-left'] = `${this.provideData.gutterX / 2}px`
-                colStyle['padding-right'] = `${this.provideData.gutterX / 2}px`
-            }
-
-            if (this.provideData.gutterY !== 0) {
-                colStyle['padding-top'] = `${this.provideData.gutterY / 2}px`
-                colStyle['padding-bottom'] = `${this.provideData.gutterY / 2}px`
-            }
-
-            if (this.stretchSelf) {
-                colStyle['flex'] = `1 0 ${this.basis}`
-            } else if (this.basis !== 'auto') {
-                colStyle['flex'] = `0 0 ${this.basis}`
-            }
-
-            return this.order ? { ...colStyle, order: this.order } : colStyle
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.mc-grid-col {
-    $block-name: &;
-
-    $cols: 12;
-
-    display: block;
-    position: relative;
-    max-width: 100%;
-
-    @mixin generate-col($viewport: '') {
-        @for $i from 1 through $cols {
-            &--span#{$viewport}-#{$i} {
-                flex: 0 0 calc((#{$i} / #{$cols}) * 100%);
-                max-width: calc((#{$i} / #{$cols}) * 100%);
-            }
-
-            &--push#{$viewport}-#{$i} {
-                inset-inline-start: calc((#{$i} / #{$cols}) * 100%);
-            }
-
-            &--pull#{$viewport}-#{$i} {
-                inset-inline-end: calc((#{$i} / #{$cols}) * 100%);
-            }
-
-            &--offset#{$viewport}-#{$i} {
-                margin-inline-start: calc((#{$i} / #{$cols}) * 100%);
-            }
-
-            &--order#{$viewport}-#{$i} {
-                order: #{$i};
-            }
-        }
-    }
-
-    @include generate-col('');
-
-    @media #{$media-query-xs} {
-        @include generate-col('-xs');
-    }
-
-    @media #{$media-query-s} {
-        @include generate-col('-s');
-    }
-
-    @media #{$media-query-m} {
-        @include generate-col('-m');
-    }
-
-    @media #{$media-query-l} {
-        @include generate-col('-l');
-    }
-
-    @media #{$media-query-xl} {
-        @include generate-col('-xl');
-    }
-}
-</style>