mediacube-ui-v2 0.0.9 → 0.0.11

package/dist/components/patterns/McFilter/McFilterTags/McFilterTags.vue.js

@@ -1,552 +0,0 @@
-import { dayjs } from '@/utils/dayjs';
-import McButton from '@/components/elements/McButton/McButton.vue';
-import McTooltip from '@/components/elements/McTooltip/McTooltip.vue';
-import McTitle from '@/components/elements/McTitle/McTitle.vue';
-import McGridRow from '@/components/patterns/McGridRow/McGridRow.vue';
-import McGridCol from '@/components/patterns/McGridCol/McGridCol.vue';
-import McFilterChip from '@/components/patterns/McFilter/McFilterChip/McFilterChip.vue';
-import { computed, ref, watch } from 'vue';
-import { useRandomNumber } from '@/composables/useRandomNumber';
-import { TooltipPositions, TooltipSizes } from '@/enums';
-import { useHelper } from '@/composables/useHelper';
-import { FilterRelations, FilterTypes } from '@/enums/Filter';
-const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
-const helper = useHelper();
-const randomNumber = useRandomNumber();
-const emit = defineEmits();
-const props = defineProps({
-    /**
-     *  Данные фильтра
-     */
-    modelValue: {
-        type: Object,
-        default: () => ({})
-    },
-    /**
-     *  Типы фильтров
-     */
-    filters: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    /**
-     *  Переводы локализаций
-     */
-    placeholders: {
-        type: Object,
-        required: true
-    },
-    /**
-     *  Активный тэг
-     */
-    activeTag: {
-        type: Object,
-        default: () => ({})
-    },
-    useTimezone: {
-        type: Boolean,
-        default: true
-    }
-});
-const simpleValues = ref({});
-const relationValues = ref({});
-const prettyActiveTag = ref(null);
-const fastFilterTags = computed(() => {
-    return simpleTags.value.filter((st) => st && st.type === FilterTypes.Fast);
-});
-const tagsWithoutFast = computed(() => {
-    return simpleTags.value.filter((st) => st && st.type !== FilterTypes.Fast);
-});
-const simpleTags = computed(() => {
-    const tags = [];
-    !helper.isEmpty(simpleValues.value) &&
-        Object.entries(simpleValues.value).forEach(([key, value]) => {
-            const _key = key;
-            let _value = value;
-            const filter = props.filters.find((f) => f.value === _key) || {};
-            if (filter && filter.type === FilterTypes.Fast) {
-                tags.push({
-                    id: randomNumber.timestamp(5),
-                    categoryName: filter?.name,
-                    category: _key,
-                    type: FilterTypes.Fast
-                });
-            }
-            else if (filter) {
-                _value = value;
-                const from = _value.more ? `${props.placeholders.from} ${getFormattedVal(_value.more, filter)}` : '';
-                const to = _value.less
-                    ? `${props.placeholders.to} ${getFormattedVal(filter.type === FilterTypes.Date
-                        ? props.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: randomNumber.timestamp(5),
-                    categoryName: filter?.name,
-                    title,
-                    value,
-                    category: _key
-                });
-            }
-        });
-    return tags;
-});
-const relationRows = computed(() => {
-    let tags = [];
-    if (!helper.isEmpty(relationValues.value)) {
-        tags = Object.entries(relationValues.value).map(([relationKey, relationVal]) => {
-            const _relationKey = relationKey;
-            const _relationVal = relationVal;
-            if (relationKey === FilterRelations.Exists) {
-                const empties = Object.keys(_relationVal).map((key) => {
-                    const filter = props.filters.find((f) => f.value === key);
-                    return {
-                        id: randomNumber.timestamp(5),
-                        categoryName: filter?.name,
-                        value: key,
-                        category: key,
-                        relationKey,
-                        closable: true
-                    };
-                });
-                const head = {
-                    id: randomNumber.timestamp(5),
-                    categoryName: props.placeholders.actions.empty,
-                    relationKey: FilterRelations.Exists
-                };
-                return [head, ...empties];
-            }
-            const values = [];
-            Object.entries(_relationVal).forEach(([categoryKey, categoryVal]) => {
-                const _categoryKey = categoryKey;
-                const _categoryVal = categoryVal;
-                const filter = props.filters.find((f) => f.value === _categoryKey) || {};
-                Object.entries(_categoryVal).forEach(([key, val]) => {
-                    values.push({
-                        id: randomNumber.timestamp(5),
-                        categoryName: filter?.name,
-                        title: val,
-                        value: key,
-                        category: _categoryKey,
-                        relationKey,
-                        closable: true
-                    });
-                });
-            });
-            const head = {
-                id: randomNumber.timestamp(5),
-                //@ts-ignore
-                categoryName: props.placeholders.actions?.[_relationKey],
-                relationKey
-            };
-            return [head, ...values];
-        });
-    }
-    return tags.filter((t) => t.length > 1);
-});
-const hasButtonClear = computed(() => {
-    return relationRows.value.length || simpleTags.value.length;
-});
-const splitTags = (value) => {
-    simpleValues.value = {};
-    relationValues.value = {};
-    if (helper.isEmpty(value))
-        return;
-    addInitTags(value);
-};
-const addInitTags = (parentVal, parentKey) => {
-    const relationKeys = [FilterRelations.Is, FilterRelations.IsNot, FilterRelations.Exists];
-    for (let [key, val] of Object.entries(parentVal)) {
-        if (relationKeys.includes(key)) {
-            relationValues.value[key] = {
-                ...(relationValues.value[key] || {}),
-                ...(parentKey ? { [parentKey]: val } : {})
-            };
-            continue;
-        }
-        if (val.constructor !== Object && parentKey) {
-            simpleValues.value[parentKey] = parentVal;
-            continue;
-        }
-        const filter = props.filters.find((f) => f.value === key);
-        if (filter && filter.type === FilterTypes.Fast) {
-            simpleValues.value[key] = { value: key };
-            continue;
-        }
-        val && addInitTags(val, key);
-    }
-};
-const onTagClick = (tag) => {
-    prettyActiveTag.value = helper.isEqual(prettyActiveTag.value, tag) ? null : tag;
-    /**
-     * Событие по клику на тэг
-     */
-    emit('tag-click', tag);
-};
-const onTagClose = (tag, relationKey) => {
-    const value = helper.cloneDeep(props.modelValue);
-    switch (relationKey) {
-        case FilterRelations.Exists:
-            delete value[tag.category][relationKey];
-            break;
-        case FilterRelations.Is:
-        case FilterRelations.IsNot:
-            //@ts-ignore
-            delete value[tag.category][relationKey][tag.value];
-            if (helper.isEmpty(value[tag.category][relationKey])) {
-                delete value[tag.category][relationKey];
-            }
-            break;
-        default:
-            delete value[tag.category];
-            break;
-    }
-    if (helper.isEmpty(value[tag.category])) {
-        delete value[tag.category];
-    }
-    /**
-     * Событие по изменению набора тэгов
-     */
-    emit('tag-change', value);
-};
-const handleClear = () => {
-    /**
-     * Событие по очистке всех тэгов
-     */
-    emit('clear');
-};
-const getFormattedVal = (val, filter) => {
-    switch (filter.type) {
-        case FilterTypes.Date:
-            return dayjs(val).format('DD.MM.YYYY');
-        case FilterTypes.Range:
-            return getFormattedNum(val);
-        default:
-            return val;
-    }
-};
-const getFormattedNum = (num) => {
-    return num;
-};
-const checkTagIsActive = (tag) => {
-    return helper.isEqual(prettyActiveTag.value, tag);
-};
-watch(() => props.modelValue, (val) => {
-    splitTags(val);
-}, { deep: true, immediate: true });
-watch(() => props.activeTag, (val) => {
-    prettyActiveTag.value = val;
-}, { immediate: true }); /* PartiallyEnd: #3632/scriptSetup.vue */
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    props: {
-        /**
-         *  Данные фильтра
-         */
-        modelValue: {
-            type: Object,
-            default: () => ({})
-        },
-        /**
-         *  Типы фильтров
-         */
-        filters: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true
-        },
-        /**
-         *  Активный тэг
-         */
-        activeTag: {
-            type: Object,
-            default: () => ({})
-        },
-        useTimezone: {
-            type: Boolean,
-            default: true
-        }
-    },
-    __typeEmits: {},
-});
-;
-let __VLS_functionalComponentProps;
-function __VLS_template() {
-    const __VLS_ctx = {};
-    const __VLS_localComponents = {
-        ...{},
-        ...{},
-        ...__VLS_ctx,
-    };
-    let __VLS_components;
-    const __VLS_localDirectives = {
-        ...{},
-        ...__VLS_ctx,
-    };
-    let __VLS_directives;
-    let __VLS_styleScopedClasses;
-    // CSS variable injection 
-    // CSS variable injection end 
-    let __VLS_resolvedLocalAndGlobalComponents;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter-tags") }, });
-    // @ts-ignore
-    [McTitle, McTitle,];
-    // @ts-ignore
-    const __VLS_0 = __VLS_asFunctionalComponent(McTitle, new McTitle({}));
-    const __VLS_1 = __VLS_0({}, ...__VLS_functionalComponentArgsRest(__VLS_0));
-    (props.placeholders.added_filters);
-    __VLS_nonNullable(__VLS_4.slots).default;
-    var __VLS_4;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter-tags__body") }, });
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter-tags__body-left") }, });
-    if (__VLS_ctx.tagsWithoutFast.length) {
-        // @ts-ignore
-        [McGridRow, McGridRow,];
-        // @ts-ignore
-        const __VLS_5 = __VLS_asFunctionalComponent(McGridRow, new McGridRow({ gutterX: ((4)), gutterY: ((8)), }));
-        const __VLS_6 = __VLS_5({ gutterX: ((4)), gutterY: ((8)), }, ...__VLS_functionalComponentArgsRest(__VLS_5));
-        for (const [tag] of __VLS_getVForSourceType((__VLS_ctx.tagsWithoutFast))) {
-            // @ts-ignore
-            [McGridCol, McGridCol,];
-            // @ts-ignore
-            const __VLS_10 = __VLS_asFunctionalComponent(McGridCol, new McGridCol({ key: ((tag.id)), }));
-            const __VLS_11 = __VLS_10({ key: ((tag.id)), }, ...__VLS_functionalComponentArgsRest(__VLS_10));
-            // @ts-ignore
-            [McFilterChip,];
-            // @ts-ignore
-            const __VLS_15 = __VLS_asFunctionalComponent(McFilterChip, new McFilterChip({ ...{ 'onClick': {} }, ...{ 'onClose': {} }, tag: ((tag)), isActive: ((__VLS_ctx.checkTagIsActive(tag))), closable: (true), }));
-            const __VLS_16 = __VLS_15({ ...{ 'onClick': {} }, ...{ 'onClose': {} }, tag: ((tag)), isActive: ((__VLS_ctx.checkTagIsActive(tag))), closable: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_15));
-            let __VLS_20;
-            const __VLS_21 = {
-                onClick: (() => __VLS_ctx.onTagClick(tag))
-            };
-            const __VLS_22 = {
-                onClose: (() => __VLS_ctx.onTagClose(tag))
-            };
-            let __VLS_17;
-            let __VLS_18;
-            var __VLS_19;
-            __VLS_nonNullable(__VLS_14.slots).default;
-            var __VLS_14;
-        }
-        __VLS_nonNullable(__VLS_9.slots).default;
-        var __VLS_9;
-    }
-    if (__VLS_ctx.relationRows.length) {
-        for (const [row, index] of __VLS_getVForSourceType((__VLS_ctx.relationRows))) {
-            // @ts-ignore
-            [McGridRow, McGridRow,];
-            // @ts-ignore
-            const __VLS_23 = __VLS_asFunctionalComponent(McGridRow, new McGridRow({ key: ((index)), gutterX: ((4)), gutterY: ((8)), }));
-            const __VLS_24 = __VLS_23({ key: ((index)), gutterX: ((4)), gutterY: ((8)), }, ...__VLS_functionalComponentArgsRest(__VLS_23));
-            for (const [tag] of __VLS_getVForSourceType((row))) {
-                // @ts-ignore
-                [McGridCol, McGridCol,];
-                // @ts-ignore
-                const __VLS_28 = __VLS_asFunctionalComponent(McGridCol, new McGridCol({ key: ((tag.id)), }));
-                const __VLS_29 = __VLS_28({ key: ((tag.id)), }, ...__VLS_functionalComponentArgsRest(__VLS_28));
-                // @ts-ignore
-                [McFilterChip,];
-                // @ts-ignore
-                const __VLS_33 = __VLS_asFunctionalComponent(McFilterChip, new McFilterChip({ ...{ 'onClick': {} }, ...{ 'onClose': {} }, tag: ((tag)), isActive: ((__VLS_ctx.checkTagIsActive(tag))), closable: ((tag.closable)), }));
-                const __VLS_34 = __VLS_33({ ...{ 'onClick': {} }, ...{ 'onClose': {} }, tag: ((tag)), isActive: ((__VLS_ctx.checkTagIsActive(tag))), closable: ((tag.closable)), }, ...__VLS_functionalComponentArgsRest(__VLS_33));
-                let __VLS_38;
-                const __VLS_39 = {
-                    onClick: (() => __VLS_ctx.onTagClick(tag))
-                };
-                const __VLS_40 = {
-                    onClose: (() => __VLS_ctx.onTagClose(tag, row[0].relationKey))
-                };
-                let __VLS_35;
-                let __VLS_36;
-                var __VLS_37;
-                __VLS_nonNullable(__VLS_32.slots).default;
-                var __VLS_32;
-            }
-            __VLS_nonNullable(__VLS_27.slots).default;
-            var __VLS_27;
-        }
-    }
-    if (__VLS_ctx.fastFilterTags.length) {
-        // @ts-ignore
-        [McGridRow, McGridRow,];
-        // @ts-ignore
-        const __VLS_41 = __VLS_asFunctionalComponent(McGridRow, new McGridRow({ gutterX: ((4)), gutterY: ((8)), }));
-        const __VLS_42 = __VLS_41({ gutterX: ((4)), gutterY: ((8)), }, ...__VLS_functionalComponentArgsRest(__VLS_41));
-        for (const [tag] of __VLS_getVForSourceType((__VLS_ctx.fastFilterTags))) {
-            // @ts-ignore
-            [McGridCol, McGridCol,];
-            // @ts-ignore
-            const __VLS_46 = __VLS_asFunctionalComponent(McGridCol, new McGridCol({ key: ((tag.id)), }));
-            const __VLS_47 = __VLS_46({ key: ((tag.id)), }, ...__VLS_functionalComponentArgsRest(__VLS_46));
-            // @ts-ignore
-            [McTooltip, McTooltip,];
-            // @ts-ignore
-            const __VLS_51 = __VLS_asFunctionalComponent(McTooltip, new McTooltip({ content: ((tag.description || '')), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
-            const __VLS_52 = __VLS_51({ content: ((tag.description || '')), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_51));
-            // @ts-ignore
-            [McFilterChip,];
-            // @ts-ignore
-            const __VLS_56 = __VLS_asFunctionalComponent(McFilterChip, new McFilterChip({ ...{ 'onClose': {} }, tag: ((tag)), closable: (true), }));
-            const __VLS_57 = __VLS_56({ ...{ 'onClose': {} }, tag: ((tag)), closable: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_56));
-            let __VLS_61;
-            const __VLS_62 = {
-                onClose: (() => __VLS_ctx.onTagClose(tag))
-            };
-            let __VLS_58;
-            let __VLS_59;
-            var __VLS_60;
-            __VLS_nonNullable(__VLS_55.slots).default;
-            var __VLS_55;
-            __VLS_nonNullable(__VLS_50.slots).default;
-            var __VLS_50;
-        }
-        __VLS_nonNullable(__VLS_45.slots).default;
-        var __VLS_45;
-    }
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter-tags__body-right") }, });
-    if (__VLS_ctx.hasButtonClear) {
-        // @ts-ignore
-        [McButton, McButton,];
-        // @ts-ignore
-        const __VLS_63 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("dark-gray-outline"), }));
-        const __VLS_64 = __VLS_63({ ...{ 'onClick': {} }, variation: ("dark-gray-outline"), }, ...__VLS_functionalComponentArgsRest(__VLS_63));
-        let __VLS_68;
-        const __VLS_69 = {
-            onClick: (__VLS_ctx.handleClear)
-        };
-        let __VLS_65;
-        let __VLS_66;
-        (__VLS_ctx.placeholders.actions.clear);
-        __VLS_nonNullable(__VLS_67.slots).default;
-        var __VLS_67;
-    }
-    __VLS_styleScopedClasses['mc-filter-tags'];
-    __VLS_styleScopedClasses['mc-filter-tags__body'];
-    __VLS_styleScopedClasses['mc-filter-tags__body-left'];
-    __VLS_styleScopedClasses['mc-filter-tags__body-right'];
-    var __VLS_slots;
-    var __VLS_inheritedAttrs;
-    const __VLS_refs = {};
-    var $refs;
-    var $el;
-    return {
-        attrs: {},
-        slots: __VLS_slots,
-        refs: $refs,
-        rootEl: $el,
-    };
-}
-;
-const __VLS_self = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            McButton: McButton,
-            McTooltip: McTooltip,
-            McTitle: McTitle,
-            McGridRow: McGridRow,
-            McGridCol: McGridCol,
-            McFilterChip: McFilterChip,
-            TooltipPositions: TooltipPositions,
-            TooltipSizes: TooltipSizes,
-            fastFilterTags: fastFilterTags,
-            tagsWithoutFast: tagsWithoutFast,
-            relationRows: relationRows,
-            hasButtonClear: hasButtonClear,
-            onTagClick: onTagClick,
-            onTagClose: onTagClose,
-            handleClear: handleClear,
-            checkTagIsActive: checkTagIsActive,
-        };
-    },
-    __typeEmits: {},
-    props: {
-        /**
-         *  Данные фильтра
-         */
-        modelValue: {
-            type: Object,
-            default: () => ({})
-        },
-        /**
-         *  Типы фильтров
-         */
-        filters: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true
-        },
-        /**
-         *  Активный тэг
-         */
-        activeTag: {
-            type: Object,
-            default: () => ({})
-        },
-        useTimezone: {
-            type: Boolean,
-            default: true
-        }
-    },
-});
-export default (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    __typeEmits: {},
-    props: {
-        /**
-         *  Данные фильтра
-         */
-        modelValue: {
-            type: Object,
-            default: () => ({})
-        },
-        /**
-         *  Типы фильтров
-         */
-        filters: {
-            type: Array,
-            required: true,
-            default: () => []
-        },
-        /**
-         *  Переводы локализаций
-         */
-        placeholders: {
-            type: Object,
-            required: true
-        },
-        /**
-         *  Активный тэг
-         */
-        activeTag: {
-            type: Object,
-            default: () => ({})
-        },
-        useTimezone: {
-            type: Boolean,
-            default: true
-        }
-    },
-    __typeEl: {},
-});
-; /* PartiallyEnd: #4569/main.vue */