mediacube-ui-v2 0.0.33 → 0.0.35

package/dist/src/components/elements/McFieldSelect/McFieldSelect.vue.js

@@ -1,1436 +0,0 @@
-import { computed, ref, watch } from 'vue';
-import { default as MultiSelect } from 'vue-multiselect';
-import { McTitle, McSvgIcon, McAvatar, McTooltip, McPreview } from '@/components';
-import { Directions } from '@/enums/ui/Directions';
-import { Colors } from '@/types/styles/Colors';
-import { useFieldErrors } from '@/composables';
-import { SelectGroupKeys } from '@/enums/Select';
-import { PreviewSizes, TitleVariations, TooltipPositions, Weights } from '@/enums';
-const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
-const emit = defineEmits();
-const props = defineProps({
-    /**
-     *  Значение
-     */
-    modelValue: {
-        type: [Array, String, Number]
-    },
-    /**
-     *  Заголовок поля:
-     *
-     */
-    title: {
-        type: String,
-        default: null
-    },
-    /**
-     *  Вспомогательный текст под инпутом:
-     *
-     */
-    helpText: {
-        type: String,
-        default: null
-    },
-    /**
-     *  Массив элементов
-     *  выпадающего списка
-     *  [
-     *      {
-     *          name: String,
-     *          value: String | Number,
-     *          text: String - доступен, если optionWithPreview=true
-     *          icon: String - доступен, если optionWithPreview=true
-     *      }
-     *  ]
-     */
-    options: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     *  Выполняется ли поиск из списка
-     *  при вводе в инпут
-     */
-    searchable: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     *  Множественный выбор
-     */
-    multiple: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     *  Скрывать из списка
-     *  выбранные элементы
-     */
-    hideSelected: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     *  Допустимо ли
-     *  пустое значение
-     */
-    allowEmpty: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     *  Отключенное состояние
-     */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     *  Ссылка на аватар/картинку
-     *  в начале label
-     */
-    avatar: {
-        type: String,
-        default: null
-    },
-    /**
-     *  Имя иконки
-     *  в начале label
-     */
-    icon: {
-        type: String,
-        default: null
-    },
-    /**
-     *  Цвет фона
-     */
-    backgroundColor: {
-        type: String,
-        default: null
-    },
-    /**
-     *  placeholder
-     */
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    /**
-     * Направление открытия списка:
-     * `above (top), below (bottom), auto`
-     */
-    openDirection: {
-        type: String,
-        default: 'auto'
-    },
-    /**
-     * Селект в режиме тэгирования, когда можно вводить свои значения и добавлять их в опции
-     * */
-    taggable: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     *  Помечать в списке выбранные
-     *  элементы
-     */
-    showLabels: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * Поиск по опциям
-     * */
-    internalSearch: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     *  Ошибки
-     */
-    errors: {
-        type: Array,
-        default: null
-    },
-    /**
-     *  Name
-     */
-    name: {
-        type: String,
-        required: true
-    },
-    /**
-     *  Если нужен тултип
-     *  над элементами списка
-     */
-    optionsTooltip: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * При группировке опций, дает возвожность выбрать сразу группу
-     * */
-    groupSelect: {
-        type: Boolean,
-        default: false
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     *  Если айтемам в селекте нужны превью с иконками и описанием
-     */
-    optionWithPreview: {
-        type: Boolean,
-        default: false
-    },
-    tabindex: {
-        type: [String, Number],
-        default: null
-    },
-    /**
-     * Если нужно ограничить максимальную высоту блока с выбранными элементами
-     */
-    maxHeight: {
-        type: String,
-        default: null
-    },
-    /**
-     * Рендерить ли выпадающий список абсолютно, что бы помещался в ограниченном пространстве
-     * */
-    renderAbsoluteList: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * Для какого языка селект
-     */
-    locale: {
-        type: String,
-        default: null
-    },
-    /**
-     * Текст для пустого селекта, когда неичего не найдено
-     */
-    noResultsText: {
-        type: String,
-        default: 'No results'
-    },
-    /**
-     * Показывать ли состояние лоадинга
-     */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    dir: {
-        type: String,
-        default: Directions.Ltr
-    },
-    /**
-     * На какое после смотреть что бы считать его заголовком строки
-     * */
-    titleField: {
-        type: String,
-        default: 'name'
-    },
-    /**
-     * На какое после смотреть что бы считать его значением строки
-     * */
-    valueField: {
-        type: String,
-        default: 'value'
-    }
-});
-const fieldErrors = useFieldErrors(props.errors);
-const searchValue = ref(null);
-const field_select_ref = ref(null);
-const field_select_wrapper_ref = ref(null);
-const local_options = ref([]);
-const isGroupedOptions = computed(() => {
-    return props.options.some((o) => Object.prototype.hasOwnProperty.call(o, SelectGroupKeys.Label) &&
-        Object.prototype.hasOwnProperty.call(o, SelectGroupKeys.Values) &&
-        //@ts-ignore
-        Array.isArray(o[SelectGroupKeys.Values]));
-});
-const hasTitle = computed(() => {
-    return !!props.title;
-});
-const hasPrepend = computed(() => {
-    return props.avatar || props.icon;
-});
-const isValueMustBeArray = computed(() => {
-    return props.multiple;
-});
-const tagBind = computed(() => {
-    return {
-        label: props.titleField,
-        trackBy: props.valueField,
-        loading: props.loading,
-        options: computedOptions.value,
-        searchable: props.searchable,
-        showLabels: props.showLabels,
-        multiple: props.multiple,
-        hideSelected: props.hideSelected,
-        allowEmpty: props.allowEmpty,
-        openDirection: props.openDirection,
-        id: props.name,
-        taggable: props.taggable,
-        tagPlaceholder: '',
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        internalSearch: props.internalSearch,
-        tabindex: +props.tabindex,
-        groupSelect: props.groupSelect && props.multiple,
-        ...(isGroupedOptions.value ? { groupLabel: SelectGroupKeys.Label } : {}),
-        ...(isGroupedOptions.value ? { groupValues: SelectGroupKeys.Values } : {})
-    };
-});
-const computedOptions = computed(() => {
-    //@ts-ignore
-    return !isGroupedOptions.value
-        ? [...props.options, ...local_options.value].filter(
-        //@ts-ignore
-        (v, i, a) => a.findIndex((afi) => afi[props.valueField] === v[props.valueField]) === i)
-        : props.options;
-});
-const rtl = computed(() => {
-    return props.dir === Directions.Rtl;
-});
-const classes = computed(() => {
-    return {
-        'mc-field-select': true,
-        'mc-field-select--error': !!fieldErrors.errorText.value,
-        'mc-field-select--disabled': props.disabled,
-        [`mc-field-select--bg-${props.backgroundColor}`]: !!props.backgroundColor,
-        'mc-field-select--is-empty-options-list': isEmptyOptionsList.value || props.loading,
-        'mc-field-select--with-preview': props.optionWithPreview,
-        'mc-field-select--max-height': !!props.maxHeight,
-        'mc-field-select--rtl': rtl.value
-    };
-});
-const computedTitle = computed(() => {
-    return `${props.title}${props.required ? ' *' : ''}`;
-});
-const styles = computed(() => {
-    const darkColors = ['gray', 'dark-gray', 'black'];
-    const lightColors = ['white'];
-    let placeHolderColor = 'gray';
-    let borderColor = props.backgroundColor;
-    let backgroundColor = props.backgroundColor;
-    let labelColor = 'black';
-    if (!props.backgroundColor || lightColors.includes(props.backgroundColor)) {
-        borderColor = 'purple';
-    }
-    if (darkColors.includes(props.backgroundColor)) {
-        labelColor = 'white';
-        placeHolderColor = 'white';
-        borderColor = 'black';
-    }
-    if (props.disabled && !props.backgroundColor) {
-        backgroundColor = 'hover-gray';
-    }
-    return {
-        '--mc-field-select-max-height': props.maxHeight,
-        '--mc-field-select-color': backgroundColor && Colors[backgroundColor],
-        '--mc-field-select-border-color': borderColor && Colors[borderColor],
-        '--mc-field-select-label-color': Colors[labelColor],
-        '--mc-field-select-placeholder-color': Colors[placeHolderColor]
-    };
-});
-const isEmptyOptionsList = computed(() => {
-    if ((props.hideSelected && !searchValue.value) || !props.options.length) {
-        if (props.multiple) {
-            if (isGroupedOptions.value)
-                return false;
-            return Array.isArray(props.modelValue) && props.options.length === props.modelValue.length;
-        }
-        else {
-            return !!props.modelValue && computedOptions.value?.length === 1 && !searchValue.value;
-        }
-    }
-    else if (props.options.length === 0)
-        return !props.options.length;
-    return false;
-});
-const computedModelValue = computed({
-    get() {
-        let preparedValue = isValueMustBeArray.value ? props.modelValue || [] : [props.modelValue].filter(Boolean);
-        preparedValue = preparedValue.map((pv) => {
-            //@ts-ignore
-            const options = isGroupedOptions.value
-                ? computedOptions.value.map((co) => co[SelectGroupKeys.Values]).flat()
-                : computedOptions.value;
-            const item = options.find((co) => String(co[props.valueField]) === String(pv));
-            return {
-                [props.titleField]: item?.[props.titleField],
-                [props.valueField]: item?.[props.valueField],
-                text: item?.text,
-                icon: item?.icon
-            };
-        });
-        const [first] = preparedValue;
-        return isValueMustBeArray.value ? preparedValue : first;
-    },
-    set(value) {
-        let preparedValue = isValueMustBeArray.value ? (Array.isArray(value) ? value : []) : [value];
-        preparedValue = preparedValue.filter(Boolean).map((v) => v[props.valueField]);
-        const [first] = preparedValue;
-        emitOriginalInput(value);
-        emitInput(isValueMustBeArray.value ? preparedValue : first);
-    }
-});
-const actualizeSavedOptions = () => {
-    //Фильтруем локальные опции и оставляем только те, значения которых выбраны в селекте
-    local_options.value = local_options.value.filter((lo) => props.modelValue?.constructor === Array
-        ? props.modelValue.map((v) => String(v)).includes(String(lo[props.valueField]))
-        : String(lo[props.valueField]) === String(props.modelValue));
-    //Делаем Юник, что бы опции не повторялись
-    local_options.value = local_options.value.filter((v, i, a) => a.findIndex((afi) => String(afi[props.valueField]) === String(v[props.valueField])) === i);
-};
-const handleTag = (value) => {
-    const preparedValue = { [props.titleField]: value, [props.valueField]: value };
-    local_options.value.push(preparedValue);
-    computedModelValue.value = isValueMustBeArray.value ? [...computedModelValue.value, preparedValue] : preparedValue;
-    /**
-     * Событие по добавлению
-     * тега в опции (по Enter)
-     */
-    emit('tag', value);
-};
-const handleSearchChange = (value) => {
-    searchValue.value = value;
-    /**
-     * Событие по вводу данных в инпут
-     */
-    emit('search-change', value);
-};
-const emitInput = (value) => {
-    fieldErrors.toggleErrorVisible();
-    /**
-     * Событие инпута (выбранное значение)
-     */
-    emit('update:modelValue', value);
-};
-const emitOriginalInput = (value) => {
-    /**
-     * Истинное значение инпута
-     */
-    emit('original-input', value);
-};
-const handleOpen = () => {
-    emit('handle-open');
-};
-const handleClose = () => {
-    emit('handle-close');
-};
-watch(() => props.options, (val) => {
-    //Пушим все входящие опции в локальные опции
-    local_options.value.push(...val);
-    actualizeSavedOptions();
-}, { immediate: true });
-watch(() => props.modelValue, () => {
-    actualizeSavedOptions();
-}, { immediate: true, deep: true }); /* PartiallyEnd: #3632/scriptSetup.vue */
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    props: {
-        /**
-         *  Значение
-         */
-        modelValue: {
-            type: [Array, String, Number]
-        },
-        /**
-         *  Заголовок поля:
-         *
-         */
-        title: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Вспомогательный текст под инпутом:
-         *
-         */
-        helpText: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Массив элементов
-         *  выпадающего списка
-         *  [
-         *      {
-         *          name: String,
-         *          value: String | Number,
-         *          text: String - доступен, если optionWithPreview=true
-         *          icon: String - доступен, если optionWithPreview=true
-         *      }
-         *  ]
-         */
-        options: {
-            type: Array,
-            default: () => []
-        },
-        /**
-         *  Выполняется ли поиск из списка
-         *  при вводе в инпут
-         */
-        searchable: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Множественный выбор
-         */
-        multiple: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Скрывать из списка
-         *  выбранные элементы
-         */
-        hideSelected: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Допустимо ли
-         *  пустое значение
-         */
-        allowEmpty: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Отключенное состояние
-         */
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Ссылка на аватар/картинку
-         *  в начале label
-         */
-        avatar: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Имя иконки
-         *  в начале label
-         */
-        icon: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Цвет фона
-         */
-        backgroundColor: {
-            type: String,
-            default: null
-        },
-        /**
-         *  placeholder
-         */
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        /**
-         * Направление открытия списка:
-         * `above (top), below (bottom), auto`
-         */
-        openDirection: {
-            type: String,
-            default: 'auto'
-        },
-        /**
-         * Селект в режиме тэгирования, когда можно вводить свои значения и добавлять их в опции
-         * */
-        taggable: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Помечать в списке выбранные
-         *  элементы
-         */
-        showLabels: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Поиск по опциям
-         * */
-        internalSearch: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Ошибки
-         */
-        errors: {
-            type: Array,
-            default: null
-        },
-        /**
-         *  Name
-         */
-        name: {
-            type: String,
-            required: true
-        },
-        /**
-         *  Если нужен тултип
-         *  над элементами списка
-         */
-        optionsTooltip: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * При группировке опций, дает возвожность выбрать сразу группу
-         * */
-        groupSelect: {
-            type: Boolean,
-            default: false
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Если айтемам в селекте нужны превью с иконками и описанием
-         */
-        optionWithPreview: {
-            type: Boolean,
-            default: false
-        },
-        tabindex: {
-            type: [String, Number],
-            default: null
-        },
-        /**
-         * Если нужно ограничить максимальную высоту блока с выбранными элементами
-         */
-        maxHeight: {
-            type: String,
-            default: null
-        },
-        /**
-         * Рендерить ли выпадающий список абсолютно, что бы помещался в ограниченном пространстве
-         * */
-        renderAbsoluteList: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Для какого языка селект
-         */
-        locale: {
-            type: String,
-            default: null
-        },
-        /**
-         * Текст для пустого селекта, когда неичего не найдено
-         */
-        noResultsText: {
-            type: String,
-            default: 'No results'
-        },
-        /**
-         * Показывать ли состояние лоадинга
-         */
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        dir: {
-            type: String,
-            default: Directions.Ltr
-        },
-        /**
-         * На какое после смотреть что бы считать его заголовком строки
-         * */
-        titleField: {
-            type: String,
-            default: 'name'
-        },
-        /**
-         * На какое после смотреть что бы считать его значением строки
-         * */
-        valueField: {
-            type: String,
-            default: 'value'
-        }
-    },
-    __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)({ ref: ("field_select_wrapper_ref"), dir: ((__VLS_ctx.dir)), ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
-    // @ts-ignore navigation for `const field_select_wrapper_ref = ref()`
-    __VLS_ctx.field_select_wrapper_ref;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__header") }, });
-    var __VLS_0 = {};
-    if (__VLS_ctx.hasTitle) {
-        const __VLS_1 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-        /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-        // @ts-ignore
-        const __VLS_2 = __VLS_asFunctionalComponent(__VLS_1, new __VLS_1({ maxWidth: ("100%"), weight: ((__VLS_ctx.Weights.Medium)), }));
-        const __VLS_3 = __VLS_2({ maxWidth: ("100%"), weight: ((__VLS_ctx.Weights.Medium)), }, ...__VLS_functionalComponentArgsRest(__VLS_2));
-        (__VLS_ctx.computedTitle);
-        __VLS_nonNullable(__VLS_6.slots).default;
-        var __VLS_6;
-    }
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__main") }, });
-    const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.MultiSelect;
-    /** @type { [typeof __VLS_components.MultiSelect, typeof __VLS_components.multiSelect, typeof __VLS_components.MultiSelect, typeof __VLS_components.multiSelect, ] } */
-    // @ts-ignore
-    const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onTag': {} }, ...{ 'onSearchChange': {} }, ...{ 'onOpen': {} }, ...{ 'onClose': {} }, ref: ("field_select_ref"), modelValue: ((__VLS_ctx.computedModelValue)), ...(__VLS_ctx.tagBind), }));
-    const __VLS_9 = __VLS_8({ ...{ 'onTag': {} }, ...{ 'onSearchChange': {} }, ...{ 'onOpen': {} }, ...{ 'onClose': {} }, ref: ("field_select_ref"), modelValue: ((__VLS_ctx.computedModelValue)), ...(__VLS_ctx.tagBind), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
-    // @ts-ignore navigation for `const field_select_ref = ref()`
-    __VLS_ctx.field_select_ref;
-    var __VLS_13 = {};
-    let __VLS_14;
-    const __VLS_15 = {
-        onTag: (__VLS_ctx.handleTag)
-    };
-    const __VLS_16 = {
-        onSearchChange: (__VLS_ctx.handleSearchChange)
-    };
-    const __VLS_17 = {
-        onOpen: (__VLS_ctx.handleOpen)
-    };
-    const __VLS_18 = {
-        onClose: (__VLS_ctx.handleClose)
-    };
-    let __VLS_10;
-    let __VLS_11;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-    {
-        const { singleLabel: __VLS_thisSlot } = __VLS_nonNullable(__VLS_12.slots);
-        const [{ option }] = __VLS_getSlotParams(__VLS_thisSlot);
-        if (props.optionWithPreview) {
-            const __VLS_19 = __VLS_resolvedLocalAndGlobalComponents.McPreview;
-            /** @type { [typeof __VLS_components.McPreview, typeof __VLS_components.mcPreview, typeof __VLS_components.McPreview, typeof __VLS_components.mcPreview, ] } */
-            // @ts-ignore
-            const __VLS_20 = __VLS_asFunctionalComponent(__VLS_19, new __VLS_19({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }));
-            const __VLS_21 = __VLS_20({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }, ...__VLS_functionalComponentArgsRest(__VLS_20));
-            if (!!option.icon) {
-                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-                {
-                    const { left: __VLS_thisSlot } = __VLS_nonNullable(__VLS_24.slots);
-                    const __VLS_25 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
-                    /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
-                    // @ts-ignore
-                    const __VLS_26 = __VLS_asFunctionalComponent(__VLS_25, new __VLS_25({ name: ((option.icon)), size: ("400"), }));
-                    const __VLS_27 = __VLS_26({ name: ((option.icon)), size: ("400"), }, ...__VLS_functionalComponentArgsRest(__VLS_26));
-                }
-            }
-            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-            {
-                const { top: __VLS_thisSlot } = __VLS_nonNullable(__VLS_24.slots);
-                const __VLS_31 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-                /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-                // @ts-ignore
-                const __VLS_32 = __VLS_asFunctionalComponent(__VLS_31, new __VLS_31({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }));
-                const __VLS_33 = __VLS_32({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }, ...__VLS_functionalComponentArgsRest(__VLS_32));
-            }
-            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-            {
-                const { right: __VLS_thisSlot } = __VLS_nonNullable(__VLS_24.slots);
-                var __VLS_37 = {};
-            }
-            if (!!option.text) {
-                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-                {
-                    const { bottom: __VLS_thisSlot } = __VLS_nonNullable(__VLS_24.slots);
-                    const __VLS_38 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-                    /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-                    // @ts-ignore
-                    const __VLS_39 = __VLS_asFunctionalComponent(__VLS_38, new __VLS_38({ color: ("gray"), }));
-                    const __VLS_40 = __VLS_39({ color: ("gray"), }, ...__VLS_functionalComponentArgsRest(__VLS_39));
-                    (option.text);
-                    __VLS_nonNullable(__VLS_43.slots).default;
-                    var __VLS_43;
-                }
-            }
-            var __VLS_24;
-        }
-        else {
-            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__single-label") }, });
-            if (__VLS_ctx.hasPrepend) {
-                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__prepend") }, });
-                if (__VLS_ctx.avatar) {
-                    const __VLS_44 = __VLS_resolvedLocalAndGlobalComponents.McAvatar;
-                    /** @type { [typeof __VLS_components.McAvatar, typeof __VLS_components.mcAvatar, ] } */
-                    // @ts-ignore
-                    const __VLS_45 = __VLS_asFunctionalComponent(__VLS_44, new __VLS_44({ src: ((__VLS_ctx.avatar)), }));
-                    const __VLS_46 = __VLS_45({ src: ((__VLS_ctx.avatar)), }, ...__VLS_functionalComponentArgsRest(__VLS_45));
-                }
-                else {
-                    const __VLS_50 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
-                    /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
-                    // @ts-ignore
-                    const __VLS_51 = __VLS_asFunctionalComponent(__VLS_50, new __VLS_50({ name: ((props.icon)), }));
-                    const __VLS_52 = __VLS_51({ name: ((props.icon)), }, ...__VLS_functionalComponentArgsRest(__VLS_51));
-                }
-            }
-            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__label-text") }, ...{ class: ((__VLS_ctx.hasPrepend ? 'mc-field-select__label-text--indent-left' : '')) }, });
-            (option ? option[props.titleField] : __VLS_ctx.placeholder);
-        }
-    }
-    if (__VLS_ctx.optionsTooltip || props.optionWithPreview) {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-        {
-            const { option: __VLS_thisSlot } = __VLS_nonNullable(__VLS_12.slots);
-            const [{ option }] = __VLS_getSlotParams(__VLS_thisSlot);
-            if (props.optionWithPreview) {
-                const __VLS_56 = __VLS_resolvedLocalAndGlobalComponents.McPreview;
-                /** @type { [typeof __VLS_components.McPreview, typeof __VLS_components.mcPreview, typeof __VLS_components.McPreview, typeof __VLS_components.mcPreview, ] } */
-                // @ts-ignore
-                const __VLS_57 = __VLS_asFunctionalComponent(__VLS_56, new __VLS_56({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }));
-                const __VLS_58 = __VLS_57({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }, ...__VLS_functionalComponentArgsRest(__VLS_57));
-                if (!!option.icon) {
-                    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-                    {
-                        const { left: __VLS_thisSlot } = __VLS_nonNullable(__VLS_61.slots);
-                        const __VLS_62 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
-                        /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
-                        // @ts-ignore
-                        const __VLS_63 = __VLS_asFunctionalComponent(__VLS_62, new __VLS_62({ name: ((option.icon)), size: ("400"), }));
-                        const __VLS_64 = __VLS_63({ name: ((option.icon)), size: ("400"), }, ...__VLS_functionalComponentArgsRest(__VLS_63));
-                    }
-                }
-                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-                {
-                    const { top: __VLS_thisSlot } = __VLS_nonNullable(__VLS_61.slots);
-                    const __VLS_68 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-                    /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-                    // @ts-ignore
-                    const __VLS_69 = __VLS_asFunctionalComponent(__VLS_68, new __VLS_68({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }));
-                    const __VLS_70 = __VLS_69({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }, ...__VLS_functionalComponentArgsRest(__VLS_69));
-                }
-                if (!!option.text) {
-                    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-                    {
-                        const { bottom: __VLS_thisSlot } = __VLS_nonNullable(__VLS_61.slots);
-                        const __VLS_74 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-                        /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-                        // @ts-ignore
-                        const __VLS_75 = __VLS_asFunctionalComponent(__VLS_74, new __VLS_74({ color: ("gray"), }));
-                        const __VLS_76 = __VLS_75({ color: ("gray"), }, ...__VLS_functionalComponentArgsRest(__VLS_75));
-                        (option.text);
-                        __VLS_nonNullable(__VLS_79.slots).default;
-                        var __VLS_79;
-                    }
-                }
-                var __VLS_61;
-            }
-            else {
-                const __VLS_80 = __VLS_resolvedLocalAndGlobalComponents.McTooltip;
-                /** @type { [typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, typeof __VLS_components.McTooltip, typeof __VLS_components.mcTooltip, ] } */
-                // @ts-ignore
-                const __VLS_81 = __VLS_asFunctionalComponent(__VLS_80, new __VLS_80({ ...{ class: ("mc-field-select__options-tooltip-target") }, maxWidth: ("m"), color: ("black"), placement: ((__VLS_ctx.TooltipPositions.Top)), content: ((option[props.titleField])), }));
-                const __VLS_82 = __VLS_81({ ...{ class: ("mc-field-select__options-tooltip-target") }, maxWidth: ("m"), color: ("black"), placement: ((__VLS_ctx.TooltipPositions.Top)), content: ((option[props.titleField])), }, ...__VLS_functionalComponentArgsRest(__VLS_81));
-                __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
-                (option[props.titleField]);
-                __VLS_nonNullable(__VLS_85.slots).default;
-                var __VLS_85;
-            }
-        }
-    }
-    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-    {
-        const { noResult: __VLS_thisSlot } = __VLS_nonNullable(__VLS_12.slots);
-        var __VLS_86 = {};
-        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
-        (props.noResultsText);
-        __VLS_nonNullable(__VLS_12.slots).default;
-    }
-    var __VLS_12;
-    if (__VLS_ctx.fieldErrors.errorText.value || props.helpText || __VLS_ctx.$slots.footer) {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__footer") }, });
-        if (__VLS_ctx.fieldErrors.errorText.value) {
-            const __VLS_87 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-            /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-            // @ts-ignore
-            const __VLS_88 = __VLS_asFunctionalComponent(__VLS_87, new __VLS_87({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }));
-            const __VLS_89 = __VLS_88({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_88));
-            (__VLS_ctx.fieldErrors.errorText.value);
-            __VLS_nonNullable(__VLS_92.slots).default;
-            var __VLS_92;
-        }
-        if (__VLS_ctx.fieldErrors.errorText.value) {
-            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
-        }
-        var __VLS_93 = {};
-        if (props.helpText) {
-            const __VLS_94 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
-            /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
-            // @ts-ignore
-            const __VLS_95 = __VLS_asFunctionalComponent(__VLS_94, new __VLS_94({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
-            const __VLS_96 = __VLS_95({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_95));
-            (props.helpText);
-            __VLS_nonNullable(__VLS_99.slots).default;
-            var __VLS_99;
-        }
-    }
-    __VLS_styleScopedClasses['mc-field-select__header'];
-    __VLS_styleScopedClasses['mc-field-select__main'];
-    __VLS_styleScopedClasses['option__desc'];
-    __VLS_styleScopedClasses['mc-field-select__single-label'];
-    __VLS_styleScopedClasses['mc-field-select__prepend'];
-    __VLS_styleScopedClasses['mc-field-select__label-text'];
-    __VLS_styleScopedClasses['option__desc'];
-    __VLS_styleScopedClasses['mc-field-select__options-tooltip-target'];
-    __VLS_styleScopedClasses['mc-field-select__footer'];
-    var __VLS_slots;
-    var __VLS_inheritedAttrs;
-    const __VLS_refs = {
-        "field_select_wrapper_ref": __VLS_nativeElements['div'],
-        "field_select_ref": __VLS_13,
-    };
-    var $refs;
-    var $el;
-    return {
-        attrs: {},
-        slots: __VLS_slots,
-        refs: $refs,
-        rootEl: $el,
-    };
-}
-;
-const __VLS_self = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            MultiSelect: MultiSelect,
-            McTitle: McTitle,
-            McSvgIcon: McSvgIcon,
-            McAvatar: McAvatar,
-            McTooltip: McTooltip,
-            McPreview: McPreview,
-            PreviewSizes: PreviewSizes,
-            TitleVariations: TitleVariations,
-            TooltipPositions: TooltipPositions,
-            Weights: Weights,
-            fieldErrors: fieldErrors,
-            field_select_ref: field_select_ref,
-            field_select_wrapper_ref: field_select_wrapper_ref,
-            hasTitle: hasTitle,
-            hasPrepend: hasPrepend,
-            tagBind: tagBind,
-            classes: classes,
-            computedTitle: computedTitle,
-            styles: styles,
-            computedModelValue: computedModelValue,
-            handleTag: handleTag,
-            handleSearchChange: handleSearchChange,
-            handleOpen: handleOpen,
-            handleClose: handleClose,
-        };
-    },
-    __typeEmits: {},
-    props: {
-        /**
-         *  Значение
-         */
-        modelValue: {
-            type: [Array, String, Number]
-        },
-        /**
-         *  Заголовок поля:
-         *
-         */
-        title: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Вспомогательный текст под инпутом:
-         *
-         */
-        helpText: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Массив элементов
-         *  выпадающего списка
-         *  [
-         *      {
-         *          name: String,
-         *          value: String | Number,
-         *          text: String - доступен, если optionWithPreview=true
-         *          icon: String - доступен, если optionWithPreview=true
-         *      }
-         *  ]
-         */
-        options: {
-            type: Array,
-            default: () => []
-        },
-        /**
-         *  Выполняется ли поиск из списка
-         *  при вводе в инпут
-         */
-        searchable: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Множественный выбор
-         */
-        multiple: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Скрывать из списка
-         *  выбранные элементы
-         */
-        hideSelected: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Допустимо ли
-         *  пустое значение
-         */
-        allowEmpty: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Отключенное состояние
-         */
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Ссылка на аватар/картинку
-         *  в начале label
-         */
-        avatar: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Имя иконки
-         *  в начале label
-         */
-        icon: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Цвет фона
-         */
-        backgroundColor: {
-            type: String,
-            default: null
-        },
-        /**
-         *  placeholder
-         */
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        /**
-         * Направление открытия списка:
-         * `above (top), below (bottom), auto`
-         */
-        openDirection: {
-            type: String,
-            default: 'auto'
-        },
-        /**
-         * Селект в режиме тэгирования, когда можно вводить свои значения и добавлять их в опции
-         * */
-        taggable: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Помечать в списке выбранные
-         *  элементы
-         */
-        showLabels: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Поиск по опциям
-         * */
-        internalSearch: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Ошибки
-         */
-        errors: {
-            type: Array,
-            default: null
-        },
-        /**
-         *  Name
-         */
-        name: {
-            type: String,
-            required: true
-        },
-        /**
-         *  Если нужен тултип
-         *  над элементами списка
-         */
-        optionsTooltip: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * При группировке опций, дает возвожность выбрать сразу группу
-         * */
-        groupSelect: {
-            type: Boolean,
-            default: false
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Если айтемам в селекте нужны превью с иконками и описанием
-         */
-        optionWithPreview: {
-            type: Boolean,
-            default: false
-        },
-        tabindex: {
-            type: [String, Number],
-            default: null
-        },
-        /**
-         * Если нужно ограничить максимальную высоту блока с выбранными элементами
-         */
-        maxHeight: {
-            type: String,
-            default: null
-        },
-        /**
-         * Рендерить ли выпадающий список абсолютно, что бы помещался в ограниченном пространстве
-         * */
-        renderAbsoluteList: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Для какого языка селект
-         */
-        locale: {
-            type: String,
-            default: null
-        },
-        /**
-         * Текст для пустого селекта, когда неичего не найдено
-         */
-        noResultsText: {
-            type: String,
-            default: 'No results'
-        },
-        /**
-         * Показывать ли состояние лоадинга
-         */
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        dir: {
-            type: String,
-            default: Directions.Ltr
-        },
-        /**
-         * На какое после смотреть что бы считать его заголовком строки
-         * */
-        titleField: {
-            type: String,
-            default: 'name'
-        },
-        /**
-         * На какое после смотреть что бы считать его значением строки
-         * */
-        valueField: {
-            type: String,
-            default: 'value'
-        }
-    },
-});
-const __VLS_component = (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    __typeEmits: {},
-    props: {
-        /**
-         *  Значение
-         */
-        modelValue: {
-            type: [Array, String, Number]
-        },
-        /**
-         *  Заголовок поля:
-         *
-         */
-        title: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Вспомогательный текст под инпутом:
-         *
-         */
-        helpText: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Массив элементов
-         *  выпадающего списка
-         *  [
-         *      {
-         *          name: String,
-         *          value: String | Number,
-         *          text: String - доступен, если optionWithPreview=true
-         *          icon: String - доступен, если optionWithPreview=true
-         *      }
-         *  ]
-         */
-        options: {
-            type: Array,
-            default: () => []
-        },
-        /**
-         *  Выполняется ли поиск из списка
-         *  при вводе в инпут
-         */
-        searchable: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Множественный выбор
-         */
-        multiple: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Скрывать из списка
-         *  выбранные элементы
-         */
-        hideSelected: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Допустимо ли
-         *  пустое значение
-         */
-        allowEmpty: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Отключенное состояние
-         */
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Ссылка на аватар/картинку
-         *  в начале label
-         */
-        avatar: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Имя иконки
-         *  в начале label
-         */
-        icon: {
-            type: String,
-            default: null
-        },
-        /**
-         *  Цвет фона
-         */
-        backgroundColor: {
-            type: String,
-            default: null
-        },
-        /**
-         *  placeholder
-         */
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        /**
-         * Направление открытия списка:
-         * `above (top), below (bottom), auto`
-         */
-        openDirection: {
-            type: String,
-            default: 'auto'
-        },
-        /**
-         * Селект в режиме тэгирования, когда можно вводить свои значения и добавлять их в опции
-         * */
-        taggable: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Помечать в списке выбранные
-         *  элементы
-         */
-        showLabels: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Поиск по опциям
-         * */
-        internalSearch: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Ошибки
-         */
-        errors: {
-            type: Array,
-            default: null
-        },
-        /**
-         *  Name
-         */
-        name: {
-            type: String,
-            required: true
-        },
-        /**
-         *  Если нужен тултип
-         *  над элементами списка
-         */
-        optionsTooltip: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * При группировке опций, дает возвожность выбрать сразу группу
-         * */
-        groupSelect: {
-            type: Boolean,
-            default: false
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Если айтемам в селекте нужны превью с иконками и описанием
-         */
-        optionWithPreview: {
-            type: Boolean,
-            default: false
-        },
-        tabindex: {
-            type: [String, Number],
-            default: null
-        },
-        /**
-         * Если нужно ограничить максимальную высоту блока с выбранными элементами
-         */
-        maxHeight: {
-            type: String,
-            default: null
-        },
-        /**
-         * Рендерить ли выпадающий список абсолютно, что бы помещался в ограниченном пространстве
-         * */
-        renderAbsoluteList: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Для какого языка селект
-         */
-        locale: {
-            type: String,
-            default: null
-        },
-        /**
-         * Текст для пустого селекта, когда неичего не найдено
-         */
-        noResultsText: {
-            type: String,
-            default: 'No results'
-        },
-        /**
-         * Показывать ли состояние лоадинга
-         */
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        dir: {
-            type: String,
-            default: Directions.Ltr
-        },
-        /**
-         * На какое после смотреть что бы считать его заголовком строки
-         * */
-        titleField: {
-            type: String,
-            default: 'name'
-        },
-        /**
-         * На какое после смотреть что бы считать его значением строки
-         * */
-        valueField: {
-            type: String,
-            default: 'value'
-        }
-    },
-    __typeEl: {},
-});
-export default {};
-; /* PartiallyEnd: #4569/main.vue */