mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,1440 @@
+import { computed, ref, watch } from 'vue';
+import MultiSelect from 'vue-multiselect';
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import McAvatar from '@/components/elements/McAvatar/McAvatar.vue';
+import McTooltip from '@/components/elements/McTooltip/McTooltip.vue';
+import McPreview from '@/components/patterns/McPreview/McPreview.vue';
+import { Directions } from '@/enums/ui/Directions';
+import { Colors } from '@/types/styles/Colors';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+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(['original-input', 'tag', 'search-change', 'update:modelValue', 'handle-open', 'handle-close']);
+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'
+        }
+    },
+    emits: {},
+});
+;
+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) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({ maxWidth: ("100%"), weight: ((__VLS_ctx.Weights.Medium)), }));
+        const __VLS_2 = __VLS_1({ maxWidth: ("100%"), weight: ((__VLS_ctx.Weights.Medium)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        (__VLS_ctx.computedTitle);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        var __VLS_5;
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-select__main") }, });
+    const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.MultiSelect;
+    /** @type { [typeof __VLS_components.MultiSelect, typeof __VLS_components.multiSelect, typeof __VLS_components.MultiSelect, typeof __VLS_components.multiSelect, ] } */
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ 'onTag': {} }, ...{ 'onSearchChange': {} }, ...{ 'onOpen': {} }, ...{ 'onClose': {} }, ref: ("field_select_ref"), modelValue: ((__VLS_ctx.computedModelValue)), ...(__VLS_ctx.tagBind), }));
+    const __VLS_8 = __VLS_7({ ...{ 'onTag': {} }, ...{ 'onSearchChange': {} }, ...{ 'onOpen': {} }, ...{ 'onClose': {} }, ref: ("field_select_ref"), modelValue: ((__VLS_ctx.computedModelValue)), ...(__VLS_ctx.tagBind), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    // @ts-ignore navigation for `const field_select_ref = ref()`
+    __VLS_ctx.field_select_ref;
+    var __VLS_12 = {};
+    let __VLS_13;
+    const __VLS_14 = {
+        onTag: (__VLS_ctx.handleTag)
+    };
+    const __VLS_15 = {
+        onSearchChange: (__VLS_ctx.handleSearchChange)
+    };
+    const __VLS_16 = {
+        onOpen: (__VLS_ctx.handleOpen)
+    };
+    const __VLS_17 = {
+        onClose: (__VLS_ctx.handleClose)
+    };
+    let __VLS_9;
+    let __VLS_10;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { singleLabel: __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+        const [{ option }] = __VLS_getSlotParams(__VLS_thisSlot);
+        if (props.optionWithPreview) {
+            // @ts-ignore
+            [McPreview, McPreview,];
+            // @ts-ignore
+            const __VLS_18 = __VLS_asFunctionalComponent(McPreview, new McPreview({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }));
+            const __VLS_19 = __VLS_18({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+            if (!!option.icon) {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+                {
+                    const { left: __VLS_thisSlot } = __VLS_nonNullable(__VLS_22.slots);
+                    // @ts-ignore
+                    [McSvgIcon,];
+                    // @ts-ignore
+                    const __VLS_23 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((option.icon)), size: ("400"), }));
+                    const __VLS_24 = __VLS_23({ name: ((option.icon)), size: ("400"), }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+                }
+            }
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { top: __VLS_thisSlot } = __VLS_nonNullable(__VLS_22.slots);
+                // @ts-ignore
+                [McTitle,];
+                // @ts-ignore
+                const __VLS_28 = __VLS_asFunctionalComponent(McTitle, new McTitle({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }));
+                const __VLS_29 = __VLS_28({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }, ...__VLS_functionalComponentArgsRest(__VLS_28));
+            }
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { right: __VLS_thisSlot } = __VLS_nonNullable(__VLS_22.slots);
+                var __VLS_33 = {};
+            }
+            if (!!option.text) {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+                {
+                    const { bottom: __VLS_thisSlot } = __VLS_nonNullable(__VLS_22.slots);
+                    // @ts-ignore
+                    [McTitle, McTitle,];
+                    // @ts-ignore
+                    const __VLS_34 = __VLS_asFunctionalComponent(McTitle, new McTitle({ color: ("gray"), }));
+                    const __VLS_35 = __VLS_34({ color: ("gray"), }, ...__VLS_functionalComponentArgsRest(__VLS_34));
+                    (option.text);
+                    __VLS_nonNullable(__VLS_38.slots).default;
+                    var __VLS_38;
+                }
+            }
+            var __VLS_22;
+        }
+        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) {
+                    // @ts-ignore
+                    [McAvatar,];
+                    // @ts-ignore
+                    const __VLS_39 = __VLS_asFunctionalComponent(McAvatar, new McAvatar({ src: ((__VLS_ctx.avatar)), }));
+                    const __VLS_40 = __VLS_39({ src: ((__VLS_ctx.avatar)), }, ...__VLS_functionalComponentArgsRest(__VLS_39));
+                }
+                else {
+                    // @ts-ignore
+                    [McSvgIcon,];
+                    // @ts-ignore
+                    const __VLS_44 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((props.icon)), }));
+                    const __VLS_45 = __VLS_44({ name: ((props.icon)), }, ...__VLS_functionalComponentArgsRest(__VLS_44));
+                }
+            }
+            __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_11.slots);
+            const [{ option }] = __VLS_getSlotParams(__VLS_thisSlot);
+            if (props.optionWithPreview) {
+                // @ts-ignore
+                [McPreview, McPreview,];
+                // @ts-ignore
+                const __VLS_49 = __VLS_asFunctionalComponent(McPreview, new McPreview({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }));
+                const __VLS_50 = __VLS_49({ ...{ class: ("option__desc") }, size: ((__VLS_ctx.PreviewSizes.L)), }, ...__VLS_functionalComponentArgsRest(__VLS_49));
+                if (!!option.icon) {
+                    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+                    {
+                        const { left: __VLS_thisSlot } = __VLS_nonNullable(__VLS_53.slots);
+                        // @ts-ignore
+                        [McSvgIcon,];
+                        // @ts-ignore
+                        const __VLS_54 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((option.icon)), size: ("400"), }));
+                        const __VLS_55 = __VLS_54({ name: ((option.icon)), size: ("400"), }, ...__VLS_functionalComponentArgsRest(__VLS_54));
+                    }
+                }
+                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+                {
+                    const { top: __VLS_thisSlot } = __VLS_nonNullable(__VLS_53.slots);
+                    // @ts-ignore
+                    [McTitle,];
+                    // @ts-ignore
+                    const __VLS_59 = __VLS_asFunctionalComponent(McTitle, new McTitle({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }));
+                    const __VLS_60 = __VLS_59({ weight: ((__VLS_ctx.Weights.SemiBold)), htmlData: ((option[props.titleField])), }, ...__VLS_functionalComponentArgsRest(__VLS_59));
+                }
+                if (!!option.text) {
+                    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+                    {
+                        const { bottom: __VLS_thisSlot } = __VLS_nonNullable(__VLS_53.slots);
+                        // @ts-ignore
+                        [McTitle, McTitle,];
+                        // @ts-ignore
+                        const __VLS_64 = __VLS_asFunctionalComponent(McTitle, new McTitle({ color: ("gray"), }));
+                        const __VLS_65 = __VLS_64({ color: ("gray"), }, ...__VLS_functionalComponentArgsRest(__VLS_64));
+                        (option.text);
+                        __VLS_nonNullable(__VLS_68.slots).default;
+                        var __VLS_68;
+                    }
+                }
+                var __VLS_53;
+            }
+            else {
+                // @ts-ignore
+                [McTooltip, McTooltip,];
+                // @ts-ignore
+                const __VLS_69 = __VLS_asFunctionalComponent(McTooltip, new McTooltip({ ...{ class: ("mc-field-select__options-tooltip-target") }, maxWidth: ("m"), color: ("black"), placement: ((__VLS_ctx.TooltipPositions.Top)), content: ((option[props.titleField])), }));
+                const __VLS_70 = __VLS_69({ ...{ class: ("mc-field-select__options-tooltip-target") }, maxWidth: ("m"), color: ("black"), placement: ((__VLS_ctx.TooltipPositions.Top)), content: ((option[props.titleField])), }, ...__VLS_functionalComponentArgsRest(__VLS_69));
+                __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
+                (option[props.titleField]);
+                __VLS_nonNullable(__VLS_73.slots).default;
+                var __VLS_73;
+            }
+        }
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { noResult: __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+        var __VLS_74 = {};
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
+        (props.noResultsText);
+        __VLS_nonNullable(__VLS_11.slots).default;
+    }
+    var __VLS_11;
+    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) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_75 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }));
+            const __VLS_76 = __VLS_75({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_75));
+            (__VLS_ctx.fieldErrors.errorText.value);
+            __VLS_nonNullable(__VLS_79.slots).default;
+            var __VLS_79;
+        }
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+        }
+        var __VLS_80 = {};
+        if (props.helpText) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_81 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
+            const __VLS_82 = __VLS_81({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_81));
+            (props.helpText);
+            __VLS_nonNullable(__VLS_85.slots).default;
+            var __VLS_85;
+        }
+    }
+    __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_12,
+    };
+    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,
+        };
+    },
+    emits: {},
+    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 {};
+    },
+    emits: {},
+    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 */