mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,1068 @@
+import { Teleport } from 'vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import McButton from '@/components/elements/McButton/McButton.vue';
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import McFieldSelect from '@/components/elements/McFieldSelect/McFieldSelect.vue';
+import McFieldText from '@/components/elements/McFieldText/McFieldText.vue';
+import McTooltip from '@/components/elements/McTooltip/McTooltip.vue';
+import McFilterTags from '@/components/patterns/McFilter/McFilterTags/McFilterTags.vue';
+import McFilterTypeRange from '@/components/patterns/McFilter/McFilterTypeRange/McFilterTypeRange.vue';
+import McFilterTypeDate from '@/components/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.vue';
+import McFilterTypeText from '@/components/patterns/McFilter/McFilterTypeText/McFilterTypeText.vue';
+import McFilterTypeRelation from '@/components/patterns/McFilter/McFilterTypeRelation/McFilterTypeRelation.vue';
+import McChip from '@/components/elements/McChip/McChip.vue';
+import { defaultPlaceholders } from '@/mocks/filterMocks';
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch, nextTick } from 'vue';
+import { useHelper } from '@/composables/useHelper';
+import { ButtonSize, ChipSize, FilterRelations, FilterTypes, TooltipPositions, TooltipSizes } from '@/enums';
+import { useLocalStorage } from '@vueuse/core';
+import { UseEncodeDecode } from '@/composables/useEncodeDecode';
+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();
+});
+const init = () => {
+    temporaryFilter.value = computedModelValue.value.filter;
+    temporaryFilterName.value = computedModelValue.value.filter_name;
+    currentValues.value = computedModelValue.value.filter;
+    currentValuesName.value = computedModelValue.value.filter_name;
+};
+onMounted(() => {
+    updatePresets();
+    window.addEventListener('storage', updatePresets);
+    init();
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('storage', updatePresets);
+});
+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") }, });
+    // @ts-ignore
+    [McTooltip, McTooltip,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McTooltip, new McTooltip({ content: ((__VLS_ctx.placeholders.main_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
+    const __VLS_1 = __VLS_0({ content: ((__VLS_ctx.placeholders.main_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    // @ts-ignore
+    [McButton, McButton,];
+    // @ts-ignore
+    const __VLS_5 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ((__VLS_ctx.visibilityToggleVariation)), disabled: ((__VLS_ctx.disabledOpen)), bgFlat: ((__VLS_ctx.isOpen)), size: ((__VLS_ctx.ButtonSize.MCompact)), }));
+    const __VLS_6 = __VLS_5({ ...{ 'onClick': {} }, variation: ((__VLS_ctx.visibilityToggleVariation)), disabled: ((__VLS_ctx.disabledOpen)), bgFlat: ((__VLS_ctx.isOpen)), size: ((__VLS_ctx.ButtonSize.MCompact)), }, ...__VLS_functionalComponentArgsRest(__VLS_5));
+    let __VLS_10;
+    const __VLS_11 = {
+        onClick: (...[$event]) => {
+            __VLS_ctx.isOpen = !__VLS_ctx.isOpen;
+        }
+    };
+    let __VLS_7;
+    let __VLS_8;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_9.slots);
+        // @ts-ignore
+        [McSvgIcon,];
+        // @ts-ignore
+        const __VLS_12 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("filter_list"), }));
+        const __VLS_13 = __VLS_12({ name: ("filter_list"), }, ...__VLS_functionalComponentArgsRest(__VLS_12));
+    }
+    var __VLS_9;
+    __VLS_nonNullable(__VLS_4.slots).default;
+    var __VLS_4;
+    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))) {
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_17 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onMouseup': {} }, key: ((preset.name)), variation: ((__VLS_ctx.getPresetButtonVariation(preset))), secondaryColor: ("purple"), }));
+            const __VLS_18 = __VLS_17({ ...{ 'onMouseup': {} }, key: ((preset.name)), variation: ((__VLS_ctx.getPresetButtonVariation(preset))), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+            let __VLS_22;
+            const __VLS_23 = {
+                onMouseup: (() => __VLS_ctx.handlePresetMouseUp(preset))
+            };
+            let __VLS_19;
+            let __VLS_20;
+            (preset.name);
+            __VLS_nonNullable(__VLS_21.slots).default;
+            var __VLS_21;
+        }
+    }
+    if (__VLS_ctx.isOpen) {
+        const __VLS_24 = ((__VLS_ctx.useTeleport ? __VLS_ctx.Teleport : 'div'));
+        // @ts-ignore
+        const __VLS_25 = __VLS_asFunctionalComponent(__VLS_24, new __VLS_24({ to: ("#filterTeleportTarget"), }));
+        const __VLS_26 = __VLS_25({ to: ("#filterTeleportTarget"), }, ...__VLS_functionalComponentArgsRest(__VLS_25));
+        __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") }, });
+        // @ts-ignore
+        [McFieldSelect,];
+        // @ts-ignore
+        const __VLS_30 = __VLS_asFunctionalComponent(McFieldSelect, new McFieldSelect({ 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_31 = __VLS_30({ 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_30));
+        if (__VLS_ctx.currentFilter) {
+            if (__VLS_ctx.isCurrentComponentIsRelation) {
+                // @ts-ignore
+                [McFilterTypeRelation,];
+                // @ts-ignore
+                const __VLS_35 = __VLS_asFunctionalComponent(McFilterTypeRelation, new McFilterTypeRelation({ ...{ '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_36 = __VLS_35({ ...{ '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_35));
+                let __VLS_40;
+                const __VLS_41 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_37;
+                let __VLS_38;
+                var __VLS_39;
+            }
+            else if (__VLS_ctx.isCurrentComponentIsDate) {
+                // @ts-ignore
+                [McFilterTypeDate,];
+                // @ts-ignore
+                const __VLS_42 = __VLS_asFunctionalComponent(McFilterTypeDate, new McFilterTypeDate({ ...{ '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_43 = __VLS_42({ ...{ '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_42));
+                let __VLS_47;
+                const __VLS_48 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_44;
+                let __VLS_45;
+                var __VLS_46;
+            }
+            else if (__VLS_ctx.isCurrentComponentIsText) {
+                // @ts-ignore
+                [McFilterTypeText,];
+                // @ts-ignore
+                const __VLS_49 = __VLS_asFunctionalComponent(McFilterTypeText, new McFilterTypeText({ ...{ '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.isCurrentComponentIsRange) {
+                // @ts-ignore
+                [McFilterTypeRange,];
+                // @ts-ignore
+                const __VLS_56 = __VLS_asFunctionalComponent(McFilterTypeRange, new McFilterTypeRange({ ...{ '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_57 = __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)), }, ...__VLS_functionalComponentArgsRest(__VLS_56));
+                let __VLS_61;
+                const __VLS_62 = {
+                    'onUpdate:modelValue': (__VLS_ctx.handleConditionChange)
+                };
+                let __VLS_58;
+                let __VLS_59;
+                var __VLS_60;
+            }
+            if (__VLS_ctx.hasButtonAdd) {
+                // @ts-ignore
+                [McButton, McButton,];
+                // @ts-ignore
+                const __VLS_63 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("purple-outline"), }));
+                const __VLS_64 = __VLS_63({ ...{ 'onClick': {} }, variation: ("purple-outline"), }, ...__VLS_functionalComponentArgsRest(__VLS_63));
+                let __VLS_68;
+                const __VLS_69 = {
+                    onClick: (__VLS_ctx.handleStoreTag)
+                };
+                let __VLS_65;
+                let __VLS_66;
+                (__VLS_ctx.placeholders.actions[__VLS_ctx.activeTag ? 'save' : 'add']);
+                __VLS_nonNullable(__VLS_67.slots).default;
+                var __VLS_67;
+            }
+        }
+        // @ts-ignore
+        [McFilterTags,];
+        // @ts-ignore
+        const __VLS_70 = __VLS_asFunctionalComponent(McFilterTags, new McFilterTags({ ...{ 'onTagChange': {} }, ...{ 'onTagClick': {} }, ...{ 'onClear': {} }, modelValue: ((__VLS_ctx.currentValuesName)), filters: ((__VLS_ctx.filters)), placeholders: ((__VLS_ctx.placeholders)), activeTag: ((__VLS_ctx.activeTag)), useTimezone: ((props.useTimezone)), }));
+        const __VLS_71 = __VLS_70({ ...{ '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_70));
+        let __VLS_75;
+        const __VLS_76 = {
+            onTagChange: ((payload) => __VLS_ctx.onTagsChange(payload))
+        };
+        const __VLS_77 = {
+            onTagClick: ((payload) => __VLS_ctx.onTagClick(payload))
+        };
+        const __VLS_78 = {
+            onClear: (__VLS_ctx.handleClearAllTags)
+        };
+        let __VLS_72;
+        let __VLS_73;
+        var __VLS_74;
+        __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))) {
+            // @ts-ignore
+            [McTooltip, McTooltip,];
+            // @ts-ignore
+            const __VLS_79 = __VLS_asFunctionalComponent(McTooltip, new McTooltip({ key: ((i)), content: ((tag.description || '')), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
+            const __VLS_80 = __VLS_79({ key: ((i)), content: ((tag.description || '')), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_79));
+            // @ts-ignore
+            [McChip, McChip,];
+            // @ts-ignore
+            const __VLS_84 = __VLS_asFunctionalComponent(McChip, new McChip({ ...{ 'onClick': {} }, variation: ("gray-outline"), textColor: ("black"), size: ((__VLS_ctx.ChipSize.S)), }));
+            const __VLS_85 = __VLS_84({ ...{ 'onClick': {} }, variation: ("gray-outline"), textColor: ("black"), size: ((__VLS_ctx.ChipSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_84));
+            let __VLS_89;
+            const __VLS_90 = {
+                onClick: (...[$event]) => {
+                    if (!((__VLS_ctx.isOpen)))
+                        return;
+                    __VLS_ctx.handlerSetFastFilter(tag);
+                }
+            };
+            let __VLS_86;
+            let __VLS_87;
+            (tag.name);
+            __VLS_nonNullable(__VLS_88.slots).default;
+            var __VLS_88;
+            __VLS_nonNullable(__VLS_83.slots).default;
+            var __VLS_83;
+        }
+        __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") }, });
+        // @ts-ignore
+        [McButton, McButton,];
+        // @ts-ignore
+        const __VLS_91 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.isDisableConfirmButton)), loading: ((__VLS_ctx.buttonConfirmIsLoading)), size: ((__VLS_ctx.ButtonSize.S)), }));
+        const __VLS_92 = __VLS_91({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.isDisableConfirmButton)), loading: ((__VLS_ctx.buttonConfirmIsLoading)), size: ((__VLS_ctx.ButtonSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_91));
+        let __VLS_96;
+        const __VLS_97 = {
+            onClick: (__VLS_ctx.handleConfirm)
+        };
+        let __VLS_93;
+        let __VLS_94;
+        (__VLS_ctx.placeholders.actions.confirm);
+        __VLS_nonNullable(__VLS_95.slots).default;
+        var __VLS_95;
+        if (__VLS_ctx.activePreset) {
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_98 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("red-outline"), size: ((__VLS_ctx.ButtonSize.S)), }));
+            const __VLS_99 = __VLS_98({ ...{ 'onClick': {} }, variation: ("red-outline"), size: ((__VLS_ctx.ButtonSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_98));
+            let __VLS_103;
+            const __VLS_104 = {
+                onClick: (() => __VLS_ctx.handleDeletePreset(__VLS_ctx.activePreset))
+            };
+            let __VLS_100;
+            let __VLS_101;
+            (__VLS_ctx.placeholders.actions.delete_preset);
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_102.slots);
+                // @ts-ignore
+                [McSvgIcon,];
+                // @ts-ignore
+                const __VLS_105 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("delete"), size: ("250"), color: ("red"), }));
+                const __VLS_106 = __VLS_105({ name: ("delete"), size: ("250"), color: ("red"), }, ...__VLS_functionalComponentArgsRest(__VLS_105));
+            }
+            var __VLS_102;
+        }
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-filter__body-bottom-right") }, });
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_110 = __VLS_asFunctionalComponent(McTitle, new McTitle({ ...{ class: ("mc-filter__preset-input-title") }, }));
+        const __VLS_111 = __VLS_110({ ...{ class: ("mc-filter__preset-input-title") }, }, ...__VLS_functionalComponentArgsRest(__VLS_110));
+        (__VLS_ctx.placeholders.create_preset);
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_114.slots);
+            // @ts-ignore
+            [McTooltip, McTooltip,];
+            // @ts-ignore
+            const __VLS_115 = __VLS_asFunctionalComponent(McTooltip, new McTooltip({ content: ((__VLS_ctx.placeholders.enter_preset_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }));
+            const __VLS_116 = __VLS_115({ content: ((__VLS_ctx.placeholders.enter_preset_tooltip)), placement: ((__VLS_ctx.TooltipPositions.Top)), size: ((__VLS_ctx.TooltipSizes.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_115));
+            // @ts-ignore
+            [McSvgIcon,];
+            // @ts-ignore
+            const __VLS_120 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("help_solid"), size: ("250"), color: ("outline-gray"), }));
+            const __VLS_121 = __VLS_120({ name: ("help_solid"), size: ("250"), color: ("outline-gray"), }, ...__VLS_functionalComponentArgsRest(__VLS_120));
+            __VLS_nonNullable(__VLS_119.slots).default;
+            var __VLS_119;
+        }
+        var __VLS_114;
+        // @ts-ignore
+        [McFieldText,];
+        // @ts-ignore
+        const __VLS_125 = __VLS_asFunctionalComponent(McFieldText, new McFieldText({ modelValue: ((__VLS_ctx.newPresetName)), placeholder: ((__VLS_ctx.placeholders.enter_preset_name)), maxLength: ((20)), ...{ class: ("mc-filter__preset-input") }, name: ("preset_name"), }));
+        const __VLS_126 = __VLS_125({ modelValue: ((__VLS_ctx.newPresetName)), placeholder: ((__VLS_ctx.placeholders.enter_preset_name)), maxLength: ((20)), ...{ class: ("mc-filter__preset-input") }, name: ("preset_name"), }, ...__VLS_functionalComponentArgsRest(__VLS_125));
+        // @ts-ignore
+        [McButton, McButton,];
+        // @ts-ignore
+        const __VLS_130 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.buttonCreateIsDisable)), variation: ("purple-outline"), size: ((__VLS_ctx.ButtonSize.S)), }));
+        const __VLS_131 = __VLS_130({ ...{ 'onClick': {} }, disabled: ((__VLS_ctx.buttonCreateIsDisable)), variation: ("purple-outline"), size: ((__VLS_ctx.ButtonSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_130));
+        let __VLS_135;
+        const __VLS_136 = {
+            onClick: (__VLS_ctx.handleCreatePreset)
+        };
+        let __VLS_132;
+        let __VLS_133;
+        (__VLS_ctx.placeholders.actions.create);
+        __VLS_nonNullable(__VLS_134.slots).default;
+        var __VLS_134;
+        __VLS_nonNullable(__VLS_29.slots).default;
+        var __VLS_29;
+    }
+    __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 */