mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,552 @@
+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 */