mediacube-ui-v2 0.0.37 → 0.0.38

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

@@ -0,0 +1,1056 @@
+import { Teleport } from 'vue';
+import { McSvgIcon, McButton, McTitle, McFieldSelect, McFieldText, McTooltip, McFilterTags, McFilterTypeRange, McFilterTypeDate, McFilterTypeText, McFilterTypeRelation, McChip } from '@/components';
+import { defaultPlaceholders } from '@/mocks/filterMocks';
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue';
+import { useHelper, UseEncodeDecode } from '@/composables';
+import { ButtonSize, ChipSize, FilterRelations, FilterTypes, TooltipPositions, TooltipSizes } from '@/enums';
+import { useLocalStorage } from '@vueuse/core';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const helper = useHelper();
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     *  Имя фильтра
+     *  (для записи данных в стор)
+     */
+    name: {
+        type: String,
+        required: true
+    },
+    /**
+     *  Значение фильтра
+     */
+    modelValue: {
+        type: Object,
+        required: true,
+        default: () => ({ filter: null, filter_name: null })
+    },
+    /**
+     *  Типы фильтров
+     */
+    filters: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    /**
+     *  Лоадинг кнопки применить фильтр
+     */
+    buttonConfirmIsLoading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Использовать ли teleport (для рендеринга вне компонента)
+     *  Если да то необходимо создать блок с id="filterTeleportTarget" в который будет рендериться тело фильтра
+     */
+    useTeleport: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Доступен ли фильтр для открытия
+     */
+    disabledOpen: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Нужно ли учитывать часовой пояс при работе с фильтром типа Date
+     * */
+    useTimezone: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Переводы плейсхолеров и текстов
+     */
+    placeholders: {
+        type: Object,
+        default: () => ({})
+    }
+});
+const isOpen = ref(false);
+// текущие значения фильтра filter / filter_name
+const currentValues = ref({});
+const currentValuesName = ref({});
+//временные значения, до нажатия на кнопку применить фильтр
+const temporaryFilter = ref({});
+const temporaryFilterName = ref({});
+// текущие выбранные значения в типе фильтра
+const currentCondition = ref({});
+const currentConditionName = ref({});
+// значение выбранного фильтра из списка фильтров
+const selectedOptionFilter = ref(null);
+const activeTag = ref(null);
+const placeholders = reactive(helper.deepMerge(defaultPlaceholders, props.placeholders));
+const isDisableConfirmButton = computed(() => {
+    return helper.isEqual(computedModelValue.value.filter, currentValues.value);
+});
+const newPresetName = ref('');
+const activePreset = ref(null);
+const temporaryActivePreset = ref(null);
+const filterLocalStorage = useLocalStorage('mcFilterPresets', {});
+const presets = ref([]);
+const computedModelValue = computed({
+    get() {
+        const { filter = null, filter_name = null } = props.modelValue || {};
+        return {
+            filter: filter,
+            filter_name: UseEncodeDecode.decode(filter_name)
+        };
+    },
+    set(val) {
+        const { filter = null, filter_name = {} } = val || {};
+        const payload = {
+            filter: filter,
+            filter_name: UseEncodeDecode.encode(filter_name)
+        };
+        emit('update:modelValue', payload);
+    }
+});
+// выбранный фильтр из списка фильтров
+const currentFilter = computed(() => {
+    return props.filters.find((f) => String(f.value) === String(selectedOptionFilter.value)) || {};
+});
+const isCurrentComponentIsRelation = computed(() => {
+    return currentFilter.value?.type === FilterTypes.Relation;
+});
+const isCurrentComponentIsDate = computed(() => {
+    return currentFilter.value?.type === FilterTypes.Date;
+});
+const isCurrentComponentIsText = computed(() => {
+    return currentFilter.value?.type === FilterTypes.Text;
+});
+const isCurrentComponentIsRange = computed(() => {
+    return currentFilter.value?.type === FilterTypes.Range;
+});
+// отфильтрованные быстрые фильтры
+const fastFilters = computed(() => {
+    const selected = (currentValues.value && Object.keys(currentValues.value)) || [];
+    return props.filters.filter((f) => f.type === FilterTypes.Fast && !selected.includes(f.value));
+});
+// отфильтрованные фильтры кроме быстрых
+const regularFilters = computed(() => {
+    return props.filters.filter((f) => f.type !== FilterTypes.Fast);
+});
+const visibilityToggleVariation = computed(() => {
+    return isOpen.value || !isDisableConfirmButton.value ? 'purple-invert' : 'black-flat';
+});
+// видна ли кнопка добавить фильтр
+const hasButtonAdd = computed(() => {
+    return (!helper.isEmpty(currentCondition.value) && !!currentFilter.value && currentFilter.value.type !== FilterTypes.Fast);
+});
+// задизэйблена ли кнопка создать, для пресетов
+const buttonCreateIsDisable = computed(() => {
+    return !newPresetName.value.trim();
+});
+onMounted(() => {
+    updatePresets();
+    window.addEventListener('storage', updatePresets);
+    init();
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('storage', updatePresets);
+});
+const init = () => {
+    temporaryFilter.value = computedModelValue.value.filter;
+    temporaryFilterName.value = computedModelValue.value.filter_name;
+    currentValues.value = computedModelValue.value.filter;
+    currentValuesName.value = computedModelValue.value.filter_name;
+};
+const updatePresets = () => {
+    presets.value = filterLocalStorage.value[props.name] || [];
+};
+const handlerSetFastFilter = (tag) => {
+    const { relation, value } = tag;
+    const filterValue = relation ? { [relation]: tag.default } : tag.default;
+    selectedOptionFilter.value = value;
+    handleConditionChange({ value: filterValue, valueName: tag.name });
+    handleStoreTag();
+};
+const handleConditionChange = ({ value, valueName }) => {
+    currentCondition.value = value;
+    currentConditionName.value = valueName || '';
+};
+const handleStoreTag = () => {
+    activeTag.value ? editTag() : addTag();
+};
+const editTag = () => {
+    switch (currentFilter.value?.type) {
+        case FilterTypes.Relation: {
+            editRelationValue();
+            break;
+        }
+        default: {
+            addSimpleValue();
+            break;
+        }
+    }
+    activeTag.value = null;
+};
+const addTag = () => {
+    switch (currentFilter.value?.type) {
+        case FilterTypes.Relation: {
+            addRelationValue();
+            break;
+        }
+        default: {
+            addSimpleValue();
+            break;
+        }
+    }
+    activeTag.value = null;
+};
+const editRelationValue = () => {
+    if (activeTag.value) {
+        const tagRelationValue = activeTag.value.relationKey === FilterRelations.Exists ? [0] : [activeTag.value.value];
+        const tagRelation = {
+            [activeTag.value.category]: {
+                [activeTag.value.relationKey]: tagRelationValue
+            }
+        };
+        const selectedRelation = {
+            [selectedOptionFilter.value]: helper.cloneDeep(currentCondition.value)
+        };
+        if (helper.isEqual(selectedRelation, tagRelation)) {
+            /**
+             * Событие по возникшей ошибке
+             */
+            emit('error', placeholders.messages.same_filter);
+            return;
+        }
+    }
+    const { category, categoryName } = getCategoriesWithNewRelation();
+    if (activeTag.value) {
+        if (activeTag.value.relationKey === FilterRelations.Exists) {
+            delete category[activeTag.value.relationKey];
+            delete categoryName[activeTag.value.relationKey];
+        }
+        else {
+            const numerableValues = category[activeTag.value.relationKey];
+            const index = numerableValues?.indexOf(String(activeTag.value.value)) ?? -1;
+            if (index !== -1) {
+                category?.[activeTag.value.relationKey]?.splice(index, 1);
+                helper.isEmpty(category[activeTag.value.relationKey]) && delete category[activeTag.value.relationKey];
+                delete categoryName?.[activeTag.value.relationKey]?.[activeTag.value.value];
+                helper.isEmpty(categoryName[activeTag.value.relationKey]) && delete categoryName[activeTag.value.relationKey];
+            }
+        }
+    }
+    setFilterValues(category, categoryName);
+};
+const addRelationValue = () => {
+    const { category, categoryName } = getCategoriesWithNewRelation();
+    setFilterValues(category, categoryName);
+};
+const getCategoriesWithNewRelation = () => {
+    const relationKeys = Object.keys(currentCondition.value);
+    const values = helper.cloneDeep(currentValues.value);
+    const valuesName = helper.cloneDeep(currentValuesName.value);
+    const selectedCategory = values[selectedOptionFilter.value];
+    const selectedCategoryName = valuesName[selectedOptionFilter.value];
+    selectedCategory &&
+        relationKeys.forEach((k) => {
+            if (k === FilterRelations.Exists) {
+                selectedCategory[FilterRelations.Exists] = 0;
+                selectedCategoryName[FilterRelations.Exists] = null;
+            }
+            else {
+                //@ts-ignore
+                const conditionValue = currentCondition.value[k];
+                //@ts-ignore
+                const conditionName = currentConditionName.value[k];
+                if (k in selectedCategory) {
+                    //@ts-ignore
+                    selectedCategory[k] = helper.uniqWith([...selectedCategory[k], ...conditionValue], helper.isEqual);
+                    selectedCategoryName[k] = {
+                        ...selectedCategoryName[k],
+                        ...conditionName
+                    };
+                }
+                else {
+                    selectedCategory[k] = conditionValue;
+                    selectedCategoryName[k] = conditionName;
+                }
+            }
+        });
+    return { category: selectedCategory, categoryName: selectedCategoryName };
+};
+const setFilterValues = (val, valName) => {
+    const newVal = {
+        ...currentValues.value,
+        [selectedOptionFilter.value]: val || currentCondition.value
+    };
+    if (helper.isEqual(currentValues.value, newVal)) {
+        /**
+         * Событие по возникшей ошибке
+         */
+        emit('error', placeholders.messages.same_filter);
+        return;
+    }
+    currentValues.value = newVal;
+    currentValuesName.value = {
+        ...currentValuesName.value,
+        [selectedOptionFilter.value]: valName || currentConditionName.value
+    };
+    setEmptyCondition();
+};
+const setEmptyCondition = () => {
+    switch (currentFilter.value?.type) {
+        case FilterTypes.Text:
+        case FilterTypes.Relation:
+            handleConditionChange({ value: '' });
+            break;
+        case FilterTypes.Range:
+        case FilterTypes.Date:
+            handleConditionChange({ value: {} });
+            break;
+        default:
+            break;
+    }
+};
+const addSimpleValue = () => {
+    if (currentFilter.value?.type === FilterTypes.Range && Object.keys(currentCondition.value || {}).length === 2) {
+        const _currentCondition = currentCondition.value;
+        if (_currentCondition.more && _currentCondition.less && _currentCondition.more > _currentCondition.less) {
+            /**
+             * Событие по возникшей ошибке
+             */
+            emit('error', placeholders.messages.more_than);
+            return;
+        }
+    }
+    setFilterValues(currentCondition.value, currentCondition.value);
+};
+const onTagsChange = (val) => {
+    activeTag.value = null;
+    if (helper.isEmpty(val)) {
+        currentValues.value = {};
+        currentValuesName.value = {};
+        return;
+    }
+    currentValuesName.value = helper.cloneDeep(val);
+    setRelationsToArrayFormat(val);
+};
+const handleClearAllTags = () => {
+    temporaryFilter.value = {};
+    temporaryFilterName.value = {};
+    currentValues.value = {};
+    currentValuesName.value = {};
+    /**
+     * Событие по очистке выбранных фильтров из поля
+     */
+    emit('clear', placeholders.messages.accidentally_cleared);
+};
+const setRelationsToArrayFormat = (obj) => {
+    const newObj = helper.cloneDeep(obj);
+    const relationKeys = [FilterRelations.Is, FilterRelations.IsNot];
+    for (let [categoryKey, categoryVal] of Object.entries(obj)) {
+        if (categoryVal.constructor === Object) {
+            for (let [key, val] of Object.entries(categoryVal)) {
+                if (relationKeys.includes(key) && val?.constructor === Object) {
+                    newObj[categoryKey][key] = [...Object.keys(val)];
+                }
+            }
+        }
+    }
+    currentValues.value = newObj;
+};
+const onTagClick = (tag) => {
+    activeTag.value = (helper.isEqual(activeTag.value, tag) ? null : tag);
+    if (!activeTag.value) {
+        setEmptyCondition();
+        return;
+    }
+    let condition = null;
+    let conditionName = null;
+    if (tag.relationKey) {
+        condition = {
+            [tag.relationKey]: tag.relationKey === FilterRelations.Exists ? [0] : [String(tag.value)]
+        };
+        conditionName = {
+            [tag.relationKey]: tag.relationKey === FilterRelations.Exists ? [0] : { [tag.value]: tag.title }
+        };
+    }
+    else {
+        condition = tag.value?.constructor === Object ? tag.value : String(tag.value);
+        conditionName = tag.value;
+    }
+    selectedOptionFilter.value = tag.category;
+    nextTick(() => {
+        currentCondition.value = condition;
+        currentConditionName.value = conditionName;
+    });
+};
+const handleConfirm = () => {
+    /**
+     * Событие по изменению значения фильтра
+     */
+    computedModelValue.value = {
+        filter: currentValues.value,
+        filter_name: currentValuesName.value
+    };
+    const payload = {
+        filter: currentValues.value,
+        filter_name: UseEncodeDecode.encode(currentValuesName.value)
+    };
+    emit('confirm', payload);
+};
+/**
+ * PRESETS BELOW
+ * */
+const handlePresetMouseUp = (preset) => {
+    if (activePreset.value && activePreset.value.name === preset.name) {
+        activePreset.value = null;
+        currentValues.value = {};
+        currentValuesName.value = {};
+    }
+    else {
+        activePreset.value = preset;
+        currentValues.value = helper.cloneDeep(preset.filter);
+        currentValuesName.value = helper.cloneDeep(preset.filter_name);
+    }
+    if (!isOpen.value) {
+        handleConfirm();
+    }
+};
+const handleDeletePreset = (preset) => {
+    const filteredPresets = filterLocalStorage.value[props.name]?.filter((p) => preset && p.name !== preset.name);
+    filterLocalStorage.value[props.name] = [...filteredPresets];
+    temporaryActivePreset.value = helper.cloneDeep(activePreset.value);
+    activePreset.value = null;
+    currentValues.value = {};
+    currentValuesName.value = {};
+    /**
+     * Событие по удалению пресета
+     */
+    emit('delete-preset', placeholders.messages.accidentally_deleted);
+};
+const handleCreatePreset = () => {
+    if (filterLocalStorage.value[props.name] &&
+        filterLocalStorage.value[props.name].find((p) => p.name?.trim() === newPresetName.value?.trim())) {
+        emit('error', placeholders.messages.same_preset_name);
+        return;
+    }
+    const preset = {
+        name: newPresetName.value?.trim(),
+        filter: helper.cloneDeep(currentValues.value),
+        filter_name: helper.cloneDeep(currentValuesName.value)
+    };
+    const currentPreset = filterLocalStorage.value[props.name];
+    if (currentPreset) {
+        filterLocalStorage.value[props.name] = [preset, ...currentPreset];
+    }
+    else {
+        filterLocalStorage.value[props.name] = [preset];
+    }
+    newPresetName.value = '';
+    activePreset.value = { ...preset };
+};
+const getPresetButtonVariation = (preset) => {
+    return activePreset.value && activePreset.value.name === preset.name ? 'purple-invert' : 'gray-outline';
+};
+watch(() => props.modelValue, (val) => {
+    const filter_value = val || {
+        filter: null,
+        filter_name: null
+    };
+    currentValues.value = { ...filter_value.filter };
+    if (filter_value.filter_name) {
+        try {
+            currentValuesName.value = UseEncodeDecode.decode(filter_value.filter_name);
+        }
+        catch (e) {
+            console.error(`Can't parse filters`);
+        }
+    }
+}, { deep: true });
+watch(() => currentFilter.value, () => {
+    handleConditionChange({ value: '' });
+}, { deep: true });
+watch(() => currentValues.value, () => {
+    if (activePreset.value) {
+        const mappedPresets = filterLocalStorage.value[props.name].map((p) => {
+            if (activePreset.value && p.name === activePreset.value.name) {
+                return {
+                    name: p.name,
+                    filter: helper.cloneDeep(currentValues.value),
+                    filter_name: helper.cloneDeep(currentValuesName.value)
+                };
+            }
+            return p;
+        });
+        filterLocalStorage.value[props.name] = [...mappedPresets];
+    }
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Имя фильтра
+         *  (для записи данных в стор)
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Значение фильтра
+         */
+        modelValue: {
+            type: Object,
+            required: true,
+            default: () => ({ filter: null, filter_name: null })
+        },
+        /**
+         *  Типы фильтров
+         */
+        filters: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        /**
+         *  Лоадинг кнопки применить фильтр
+         */
+        buttonConfirmIsLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Использовать ли teleport (для рендеринга вне компонента)
+         *  Если да то необходимо создать блок с id="filterTeleportTarget" в который будет рендериться тело фильтра
+         */
+        useTeleport: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Доступен ли фильтр для открытия
+         */
+        disabledOpen: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Нужно ли учитывать часовой пояс при работе с фильтром типа Date
+         * */
+        useTimezone: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Переводы плейсхолеров и текстов
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __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") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__header") }, });
+    const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.McTooltip;
+    /** @type { [typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, ] } */
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ content: ((__VLS_ctx.placeholders.main_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
+    const __VLS_2 = __VLS_1({ content: ((__VLS_ctx.placeholders.main_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+    /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ 'onClick': {} }, variation: ((__VLS_ctx.visibilityToggleVariation)), disabled: ((__VLS_ctx.disabledOpen)), bgFlat: ((__VLS_ctx.isOpen)), size: ((__VLS_ctx.ButtonSize.MCompact)), }));
+    const __VLS_8 = __VLS_7({ ...{ 'onClick': {} }, variation: ((__VLS_ctx.visibilityToggleVariation)), disabled: ((__VLS_ctx.disabledOpen)), bgFlat: ((__VLS_ctx.isOpen)), size: ((__VLS_ctx.ButtonSize.MCompact)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    let __VLS_12;
+    const __VLS_13 = {
+        onClick: (...[$event]) => {
+            __VLS_ctx.isOpen = !__VLS_ctx.isOpen;
+        }
+    };
+    let __VLS_9;
+    let __VLS_10;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+        const __VLS_14 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
+        /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
+        // @ts-ignore
+        const __VLS_15 = __VLS_asFunctionalComponent(__VLS_14, new __VLS_14({ name: ("filter_list"), }));
+        const __VLS_16 = __VLS_15({ name: ("filter_list"), }, ...__VLS_functionalComponentArgsRest(__VLS_15));
+    }
+    var __VLS_11;
+    __VLS_nonNullable(__VLS_5.slots).default;
+    var __VLS_5;
+    if (__VLS_ctx.presets) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__presets") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__presets-inner") }, });
+        for (const [preset] of __VLS_getVForSourceType((__VLS_ctx.presets))) {
+            const __VLS_20 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+            /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+            // @ts-ignore
+            const __VLS_21 = __VLS_asFunctionalComponent(__VLS_20, new __VLS_20({ ...{ 'onMouseup': {} }, key: ((preset.name)), variation: ((__VLS_ctx.getPresetButtonVariation(preset))), secondaryColor: ("purple"), }));
+            const __VLS_22 = __VLS_21({ ...{ 'onMouseup': {} }, key: ((preset.name)), variation: ((__VLS_ctx.getPresetButtonVariation(preset))), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_21));
+            let __VLS_26;
+            const __VLS_27 = {
+                onMouseup: (() => __VLS_ctx.handlePresetMouseUp(preset))
+            };
+            let __VLS_23;
+            let __VLS_24;
+            (preset.name);
+            __VLS_nonNullable(__VLS_25.slots).default;
+            var __VLS_25;
+        }
+    }
+    if (__VLS_ctx.isOpen) {
+        const __VLS_28 = ((__VLS_ctx.useTeleport ? __VLS_ctx.Teleport : 'div'));
+        // @ts-ignore
+        const __VLS_29 = __VLS_asFunctionalComponent(__VLS_28, new __VLS_28({ to: ("#filterTeleportTarget"), }));
+        const __VLS_30 = __VLS_29({ to: ("#filterTeleportTarget"), }, ...__VLS_functionalComponentArgsRest(__VLS_29));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body-top") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body-top-left") }, });
+        const __VLS_34 = __VLS_resolvedLocalAndGlobalComponents.McFieldSelect;
+        /** @type { [typeof __VLS_components.McFieldSelect, typeof __VLS_components.mcFieldSelect, ] } */
+        // @ts-ignore
+        const __VLS_35 = __VLS_asFunctionalComponent(__VLS_34, new __VLS_34({ modelValue: ((__VLS_ctx.selectedOptionFilter)), title: ((__VLS_ctx.placeholders.value)), options: ((__VLS_ctx.regularFilters)), placeholder: ((__VLS_ctx.placeholders.choose)), hideSelected: ((false)), ...{ class: ("mc-filter__main-select") }, name: ("filter_value_name"), }));
+        const __VLS_36 = __VLS_35({ modelValue: ((__VLS_ctx.selectedOptionFilter)), title: ((__VLS_ctx.placeholders.value)), options: ((__VLS_ctx.regularFilters)), placeholder: ((__VLS_ctx.placeholders.choose)), hideSelected: ((false)), ...{ class: ("mc-filter__main-select") }, name: ("filter_value_name"), }, ...__VLS_functionalComponentArgsRest(__VLS_35));
+        if (__VLS_ctx.currentFilter) {
+            if (__VLS_ctx.isCurrentComponentIsRelation) {
+                const __VLS_40 = __VLS_resolvedLocalAndGlobalComponents.McFilterTypeRelation;
+                /** @type { [typeof __VLS_components.McFilterTypeRelation, typeof __VLS_components.mcFilterTypeRelation, ] } */
+                // @ts-ignore
+                const __VLS_41 = __VLS_asFunctionalComponent(__VLS_40, new __VLS_40({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }));
+                const __VLS_42 = __VLS_41({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }, ...__VLS_functionalComponentArgsRest(__VLS_41));
+                let __VLS_46;
+                const __VLS_47 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_43;
+                let __VLS_44;
+                var __VLS_45;
+            }
+            else if (__VLS_ctx.isCurrentComponentIsDate) {
+                const __VLS_48 = __VLS_resolvedLocalAndGlobalComponents.McFilterTypeDate;
+                /** @type { [typeof __VLS_components.McFilterTypeDate, typeof __VLS_components.mcFilterTypeDate, ] } */
+                // @ts-ignore
+                const __VLS_49 = __VLS_asFunctionalComponent(__VLS_48, new __VLS_48({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }));
+                const __VLS_50 = __VLS_49({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }, ...__VLS_functionalComponentArgsRest(__VLS_49));
+                let __VLS_54;
+                const __VLS_55 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_51;
+                let __VLS_52;
+                var __VLS_53;
+            }
+            else if (__VLS_ctx.isCurrentComponentIsText) {
+                const __VLS_56 = __VLS_resolvedLocalAndGlobalComponents.McFilterTypeText;
+                /** @type { [typeof __VLS_components.McFilterTypeText, typeof __VLS_components.mcFilterTypeText, ] } */
+                // @ts-ignore
+                const __VLS_57 = __VLS_asFunctionalComponent(__VLS_56, new __VLS_56({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }));
+                const __VLS_58 = __VLS_57({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }, ...__VLS_functionalComponentArgsRest(__VLS_57));
+                let __VLS_62;
+                const __VLS_63 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_59;
+                let __VLS_60;
+                var __VLS_61;
+            }
+            else if (__VLS_ctx.isCurrentComponentIsRange) {
+                const __VLS_64 = __VLS_resolvedLocalAndGlobalComponents.McFilterTypeRange;
+                /** @type { [typeof __VLS_components.McFilterTypeRange, typeof __VLS_components.mcFilterTypeRange, ] } */
+                // @ts-ignore
+                const __VLS_65 = __VLS_asFunctionalComponent(__VLS_64, new __VLS_64({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }));
+                const __VLS_66 = __VLS_65({ ...{ 'onUpdate:modelValue': {} }, modelValue: __VLS_ctx.currentCondition, filter: __VLS_ctx.currentFilter, placeholders: ((__VLS_ctx.placeholders)), currentValues: ((!__VLS_ctx.activeTag ? __VLS_ctx.currentValues : {})), useTimezone: ((props.useTimezone)), }, ...__VLS_functionalComponentArgsRest(__VLS_65));
+                let __VLS_70;
+                const __VLS_71 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_67;
+                let __VLS_68;
+                var __VLS_69;
+            }
+            if (__VLS_ctx.hasButtonAdd) {
+                const __VLS_72 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+                /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+                // @ts-ignore
+                const __VLS_73 = __VLS_asFunctionalComponent(__VLS_72, new __VLS_72({ ...{ 'onClick': {} }, variation: ("purple-outline"), }));
+                const __VLS_74 = __VLS_73({ ...{ 'onClick': {} }, variation: ("purple-outline"), }, ...__VLS_functionalComponentArgsRest(__VLS_73));
+                let __VLS_78;
+                const __VLS_79 = {
+                    onClick: (__VLS_ctx.handleStoreTag)
+                };
+                let __VLS_75;
+                let __VLS_76;
+                (__VLS_ctx.placeholders.actions[__VLS_ctx.activeTag ? 'save' : 'add']);
+                __VLS_nonNullable(__VLS_77.slots).default;
+                var __VLS_77;
+            }
+        }
+        const __VLS_80 = __VLS_resolvedLocalAndGlobalComponents.McFilterTags;
+        /** @type { [typeof __VLS_components.McFilterTags, typeof __VLS_components.mcFilterTags, ] } */
+        // @ts-ignore
+        const __VLS_81 = __VLS_asFunctionalComponent(__VLS_80, new __VLS_80({ ...{ 'onTagChange': {} }, ...{ 'onTagClick': {} }, ...{ 'onClear': {} }, modelValue: ((__VLS_ctx.currentValuesName)), filters: ((__VLS_ctx.filters)), placeholders: ((__VLS_ctx.placeholders)), activeTag: ((__VLS_ctx.activeTag)), useTimezone: ((props.useTimezone)), }));
+        const __VLS_82 = __VLS_81({ ...{ 'onTagChange': {} }, ...{ 'onTagClick': {} }, ...{ 'onClear': {} }, modelValue: ((__VLS_ctx.currentValuesName)), filters: ((__VLS_ctx.filters)), placeholders: ((__VLS_ctx.placeholders)), activeTag: ((__VLS_ctx.activeTag)), useTimezone: ((props.useTimezone)), }, ...__VLS_functionalComponentArgsRest(__VLS_81));
+        let __VLS_86;
+        const __VLS_87 = {
+            onTagChange: ((payload) => __VLS_ctx.onTagsChange(payload))
+        };
+        const __VLS_88 = {
+            onTagClick: ((payload) => __VLS_ctx.onTagClick(payload))
+        };
+        const __VLS_89 = {
+            onClear: (__VLS_ctx.handleClearAllTags)
+        };
+        let __VLS_83;
+        let __VLS_84;
+        var __VLS_85;
+        __VLS_elementAsFunction(__VLS_intrinsicElements.section, __VLS_intrinsicElements.section)({ ...{ class: ("mc-filter__body-fast-tags-wrapper") }, });
+        for (const [tag, i] of __VLS_getVForSourceType((__VLS_ctx.fastFilters))) {
+            const __VLS_90 = __VLS_resolvedLocalAndGlobalComponents.McTooltip;
+            /** @type { [typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, ] } */
+            // @ts-ignore
+            const __VLS_91 = __VLS_asFunctionalComponent(__VLS_90, new __VLS_90({ key: ((i)), content: ((tag.description || '')), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
+            const __VLS_92 = __VLS_91({ key: ((i)), content: ((tag.description || '')), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_91));
+            const __VLS_96 = __VLS_resolvedLocalAndGlobalComponents.McChip;
+            /** @type { [typeof __VLS_components.McChip, typeof __VLS_components.mcChip, typeof __VLS_components.McChip, typeof __VLS_components.mcChip, ] } */
+            // @ts-ignore
+            const __VLS_97 = __VLS_asFunctionalComponent(__VLS_96, new __VLS_96({ ...{ 'onClick': {} }, variation: ("gray-outline"), textColor: ("black"), size: ((__VLS_ctx.ChipSize.S)), }));
+            const __VLS_98 = __VLS_97({ ...{ 'onClick': {} }, variation: ("gray-outline"), textColor: ("black"), size: ((__VLS_ctx.ChipSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_97));
+            let __VLS_102;
+            const __VLS_103 = {
+                onClick: (...[$event]) => {
+                    if (!((__VLS_ctx.isOpen)))
+                        return;
+                    __VLS_ctx.handlerSetFastFilter(tag);
+                }
+            };
+            let __VLS_99;
+            let __VLS_100;
+            (tag.name);
+            __VLS_nonNullable(__VLS_101.slots).default;
+            var __VLS_101;
+            __VLS_nonNullable(__VLS_95.slots).default;
+            var __VLS_95;
+        }
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body-bottom") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body-bottom-left") }, });
+        const __VLS_104 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+        /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+        // @ts-ignore
+        const __VLS_105 = __VLS_asFunctionalComponent(__VLS_104, new __VLS_104({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.isDisableConfirmButton)), loading: ((__VLS_ctx.buttonConfirmIsLoading)), size: ((__VLS_ctx.ButtonSize.S)), }));
+        const __VLS_106 = __VLS_105({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.isDisableConfirmButton)), loading: ((__VLS_ctx.buttonConfirmIsLoading)), size: ((__VLS_ctx.ButtonSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_105));
+        let __VLS_110;
+        const __VLS_111 = {
+            onClick: (__VLS_ctx.handleConfirm)
+        };
+        let __VLS_107;
+        let __VLS_108;
+        (__VLS_ctx.placeholders.actions.confirm);
+        __VLS_nonNullable(__VLS_109.slots).default;
+        var __VLS_109;
+        if (__VLS_ctx.activePreset) {
+            const __VLS_112 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+            /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+            // @ts-ignore
+            const __VLS_113 = __VLS_asFunctionalComponent(__VLS_112, new __VLS_112({ ...{ 'onClick': {} }, variation: ("red-outline"), size: ((__VLS_ctx.ButtonSize.S)), }));
+            const __VLS_114 = __VLS_113({ ...{ 'onClick': {} }, variation: ("red-outline"), size: ((__VLS_ctx.ButtonSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_113));
+            let __VLS_118;
+            const __VLS_119 = {
+                onClick: (() => __VLS_ctx.handleDeletePreset(__VLS_ctx.activePreset))
+            };
+            let __VLS_115;
+            let __VLS_116;
+            (__VLS_ctx.placeholders.actions.delete_preset);
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_117.slots);
+                const __VLS_120 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
+                /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
+                // @ts-ignore
+                const __VLS_121 = __VLS_asFunctionalComponent(__VLS_120, new __VLS_120({ name: ("delete"), size: ("250"), color: ("red"), }));
+                const __VLS_122 = __VLS_121({ name: ("delete"), size: ("250"), color: ("red"), }, ...__VLS_functionalComponentArgsRest(__VLS_121));
+            }
+            var __VLS_117;
+        }
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body-bottom-right") }, });
+        const __VLS_126 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
+        /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
+        // @ts-ignore
+        const __VLS_127 = __VLS_asFunctionalComponent(__VLS_126, new __VLS_126({ ...{ class: ("mc-filter__preset-input-title") }, }));
+        const __VLS_128 = __VLS_127({ ...{ class: ("mc-filter__preset-input-title") }, }, ...__VLS_functionalComponentArgsRest(__VLS_127));
+        (__VLS_ctx.placeholders.create_preset);
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_131.slots);
+            const __VLS_132 = __VLS_resolvedLocalAndGlobalComponents.McTooltip;
+            /** @type { [typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, ] } */
+            // @ts-ignore
+            const __VLS_133 = __VLS_asFunctionalComponent(__VLS_132, new __VLS_132({ content: ((__VLS_ctx.placeholders.enter_preset_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
+            const __VLS_134 = __VLS_133({ content: ((__VLS_ctx.placeholders.enter_preset_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_133));
+            const __VLS_138 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
+            /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
+            // @ts-ignore
+            const __VLS_139 = __VLS_asFunctionalComponent(__VLS_138, new __VLS_138({ name: ("help_solid"), size: ("250"), color: ("outline-gray"), }));
+            const __VLS_140 = __VLS_139({ name: ("help_solid"), size: ("250"), color: ("outline-gray"), }, ...__VLS_functionalComponentArgsRest(__VLS_139));
+            __VLS_nonNullable(__VLS_137.slots).default;
+            var __VLS_137;
+        }
+        var __VLS_131;
+        const __VLS_144 = __VLS_resolvedLocalAndGlobalComponents.McFieldText;
+        /** @type { [typeof __VLS_components.McFieldText, typeof __VLS_components.mcFieldText, ] } */
+        // @ts-ignore
+        const __VLS_145 = __VLS_asFunctionalComponent(__VLS_144, new __VLS_144({ modelValue: ((__VLS_ctx.newPresetName)), placeholder: ((__VLS_ctx.placeholders.enter_preset_name)), maxLength: ((20)), ...{ class: ("mc-filter__preset-input") }, name: ("preset_name"), }));
+        const __VLS_146 = __VLS_145({ modelValue: ((__VLS_ctx.newPresetName)), placeholder: ((__VLS_ctx.placeholders.enter_preset_name)), maxLength: ((20)), ...{ class: ("mc-filter__preset-input") }, name: ("preset_name"), }, ...__VLS_functionalComponentArgsRest(__VLS_145));
+        const __VLS_150 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+        /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+        // @ts-ignore
+        const __VLS_151 = __VLS_asFunctionalComponent(__VLS_150, new __VLS_150({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.buttonCreateIsDisable)), variation: ("purple-outline"), size: ((__VLS_ctx.ButtonSize.S)), }));
+        const __VLS_152 = __VLS_151({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.buttonCreateIsDisable)), variation: ("purple-outline"), size: ((__VLS_ctx.ButtonSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_151));
+        let __VLS_156;
+        const __VLS_157 = {
+            onClick: (__VLS_ctx.handleCreatePreset)
+        };
+        let __VLS_153;
+        let __VLS_154;
+        (__VLS_ctx.placeholders.actions.create);
+        __VLS_nonNullable(__VLS_155.slots).default;
+        var __VLS_155;
+        __VLS_nonNullable(__VLS_33.slots).default;
+        var __VLS_33;
+    }
+    __VLS_styleScopedClasses['mc-filter'];
+    __VLS_styleScopedClasses['mc-filter__header'];
+    __VLS_styleScopedClasses['mc-filter__presets'];
+    __VLS_styleScopedClasses['mc-filter__presets-inner'];
+    __VLS_styleScopedClasses['mc-filter__body'];
+    __VLS_styleScopedClasses['mc-filter__body-top'];
+    __VLS_styleScopedClasses['mc-filter__body-top-left'];
+    __VLS_styleScopedClasses['mc-filter__main-select'];
+    __VLS_styleScopedClasses['mc-filter__body-fast-tags-wrapper'];
+    __VLS_styleScopedClasses['mc-filter__body-bottom'];
+    __VLS_styleScopedClasses['mc-filter__body-bottom-left'];
+    __VLS_styleScopedClasses['mc-filter__body-bottom-right'];
+    __VLS_styleScopedClasses['mc-filter__preset-input-title'];
+    __VLS_styleScopedClasses['mc-filter__preset-input'];
+    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 {
+            Teleport: Teleport,
+            McSvgIcon: McSvgIcon,
+            McButton: McButton,
+            McTitle: McTitle,
+            McFieldSelect: McFieldSelect,
+            McFieldText: McFieldText,
+            McTooltip: McTooltip,
+            McFilterTags: McFilterTags,
+            McFilterTypeRange: McFilterTypeRange,
+            McFilterTypeDate: McFilterTypeDate,
+            McFilterTypeText: McFilterTypeText,
+            McFilterTypeRelation: McFilterTypeRelation,
+            McChip: McChip,
+            ButtonSize: ButtonSize,
+            ChipSize: ChipSize,
+            TooltipPositions: TooltipPositions,
+            TooltipSizes: TooltipSizes,
+            isOpen: isOpen,
+            currentValues: currentValues,
+            currentValuesName: currentValuesName,
+            currentCondition: currentCondition,
+            selectedOptionFilter: selectedOptionFilter,
+            activeTag: activeTag,
+            placeholders: placeholders,
+            isDisableConfirmButton: isDisableConfirmButton,
+            newPresetName: newPresetName,
+            activePreset: activePreset,
+            presets: presets,
+            currentFilter: currentFilter,
+            isCurrentComponentIsRelation: isCurrentComponentIsRelation,
+            isCurrentComponentIsDate: isCurrentComponentIsDate,
+            isCurrentComponentIsText: isCurrentComponentIsText,
+            isCurrentComponentIsRange: isCurrentComponentIsRange,
+            fastFilters: fastFilters,
+            regularFilters: regularFilters,
+            visibilityToggleVariation: visibilityToggleVariation,
+            hasButtonAdd: hasButtonAdd,
+            buttonCreateIsDisable: buttonCreateIsDisable,
+            handlerSetFastFilter: handlerSetFastFilter,
+            handleConditionChange: handleConditionChange,
+            handleStoreTag: handleStoreTag,
+            onTagsChange: onTagsChange,
+            handleClearAllTags: handleClearAllTags,
+            onTagClick: onTagClick,
+            handleConfirm: handleConfirm,
+            handlePresetMouseUp: handlePresetMouseUp,
+            handleDeletePreset: handleDeletePreset,
+            handleCreatePreset: handleCreatePreset,
+            getPresetButtonVariation: getPresetButtonVariation,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Имя фильтра
+         *  (для записи данных в стор)
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Значение фильтра
+         */
+        modelValue: {
+            type: Object,
+            required: true,
+            default: () => ({ filter: null, filter_name: null })
+        },
+        /**
+         *  Типы фильтров
+         */
+        filters: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        /**
+         *  Лоадинг кнопки применить фильтр
+         */
+        buttonConfirmIsLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Использовать ли teleport (для рендеринга вне компонента)
+         *  Если да то необходимо создать блок с id="filterTeleportTarget" в который будет рендериться тело фильтра
+         */
+        useTeleport: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Доступен ли фильтр для открытия
+         */
+        disabledOpen: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Нужно ли учитывать часовой пояс при работе с фильтром типа Date
+         * */
+        useTimezone: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Переводы плейсхолеров и текстов
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Имя фильтра
+         *  (для записи данных в стор)
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Значение фильтра
+         */
+        modelValue: {
+            type: Object,
+            required: true,
+            default: () => ({ filter: null, filter_name: null })
+        },
+        /**
+         *  Типы фильтров
+         */
+        filters: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        /**
+         *  Лоадинг кнопки применить фильтр
+         */
+        buttonConfirmIsLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Использовать ли teleport (для рендеринга вне компонента)
+         *  Если да то необходимо создать блок с id="filterTeleportTarget" в который будет рендериться тело фильтра
+         */
+        useTeleport: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Доступен ли фильтр для открытия
+         */
+        disabledOpen: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Нужно ли учитывать часовой пояс при работе с фильтром типа Date
+         * */
+        useTimezone: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Переводы плейсхолеров и текстов
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */