mediacube-ui-v2 0.0.37 → 0.0.38

package/dist/src/components/templates/McTable/McTable/McTable.vue.js

@@ -0,0 +1,854 @@
+import { computed, onBeforeUnmount, onMounted, reactive, ref, useSlots } from 'vue';
+import { useHelper } from '@/composables';
+import { ChipSize, Weights } from '@/enums';
+import { TABLE } from '@/consts/table';
+import { McInfinityLoadingTrigger, McTitle, McChip, McTableSort, McTableSkeletonLoading, McNoData, McBottomLoader, McOverlay } from '@/components';
+import { useThrottleFn } from '@vueuse/core';
+import { default as noTableDataImg } from '@/assets/img/no_table_data.png';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const defaultPlaceholders = {
+    no_data: 'No data',
+    loading: 'Loading...',
+    all_loaded: 'All loaded',
+    total: 'Total'
+};
+const emit = defineEmits();
+/**
+ * Слоты
+ *
+ * #header-cell - Заголовок колонки, каждая колонка
+ * #`{column.field}-header-right` - Справа от заголовка колонки, именной слот, работает по имени колонки, что бы добавлять в конкретную колонку
+ * #`{column.field}-total` - Тотал колонки, именной слот, работает по имени колонки, что бы добавлять в конкретную колонку
+ * #column.field - Тело ячейки таблицы. Если не использовать слот, просто будут выводиться данные по названию поля
+ * #`{column.field}-right` - Справа от контента колонки, именной слот, работает по имени колонки, что бы добавлять в конкретную колонку
+ * №footer-cell - тотал колонки (строка внизу таблицы), каждая колонка
+ * */
+const helper = useHelper();
+const slots = useSlots();
+const props = defineProps({
+    columns: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    data: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    /**
+     * Тоталы таблицы (отображаются в футере), обьект ключи которого = поле field из массива колонок
+     * */
+    totals: {
+        type: Object,
+        default: () => ({})
+    },
+    sort: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * Фиксировать ли первую колонку таблицы
+     * */
+    fixedFirstColumn: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * Фиксировать ли последнюю колонку таблицы
+     * */
+    fixedLastColumn: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Есть ли у таблицы еще данные, если true, при полном пролистывании таблицы вниз, будет вызываться метод @loading
+     * */
+    hasLoadMore: {
+        type: Boolean,
+        default: true
+    },
+    height: {
+        type: [Number, String],
+        default: 'auto'
+    },
+    /**
+     * Высота строки в шапке
+     * */
+    headerRowHeight: {
+        type: Number,
+        default: TABLE.defaultHeaderHeight
+    },
+    /**
+     * Высота строки в теле таблицы
+     * */
+    rowHeight: {
+        type: Number,
+        default: TABLE.defaultRowHeight
+    },
+    /**
+     * Высота строки в подвале (строка с тоталами)
+     * */
+    footerRowHeight: {
+        type: Number,
+        default: TABLE.defaultFooterRowHeight
+    },
+    /**
+     *  Отрисовка всей таблицы и полоса загрузки в каждой ячейке (скелетная загрузка)
+     */
+    skeletonLoading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Лоадинг внизу таблицы
+     * */
+    bottomLoading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Оверлей с затемнение на всю таблицу
+     * */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Переводы плейсхолеров и текстов
+     */
+    placeholders: {
+        type: Object,
+        default: () => ({})
+    },
+    noDataIcon: {
+        type: String,
+        default: null
+    },
+    noDataImg: {
+        type: String,
+        default: noTableDataImg
+    },
+    /**
+     * Любые данные что бы передать их в карточку из таблицы
+     * */
+    toTableCardProps: {
+        type: Object,
+        default: () => ({})
+    }
+});
+const openCardState = ref({ state: false });
+const mcTable = ref(null);
+const hasData = computed(() => {
+    return !helper.isEmpty(props.data);
+});
+const hasTotals = computed(() => {
+    return !helper.isEmpty(props.totals);
+});
+const hasFixedColumn = computed(() => {
+    return props.fixedFirstColumn || props.fixedLastColumn;
+});
+const placeholders = reactive(helper.deepMerge(defaultPlaceholders, props.placeholders));
+const shadows = reactive({
+    firstColHasShadow: false,
+    lastColHasShadow: false
+});
+const computedColumns = computed(() => {
+    const [first] = props.columns;
+    return (openCardState.value.state ? [first] : props.columns).map((column, index) => {
+        const fixedFirst = props.fixedFirstColumn && index === 0;
+        const fixedLast = props.fixedLastColumn && index === props.columns.length - 1;
+        return {
+            ...column,
+            fixedFirst,
+            fixedLast,
+            style: {
+                ...(column.width
+                    ? {
+                        '--mc-table-cell-width': `${column.width}px`,
+                        '--mc-table-cell-max-width': `${column.width}px`,
+                        '--mc-table-cell-min-width': `${column.width}px`
+                    }
+                    : {
+                        '--mc-table-cell-min-width': column.minWidth && `${column.minWidth}px`,
+                        '--mc-table-cell-width': '100%'
+                    })
+            }
+        };
+    });
+});
+const computedHeaderColumns = computed(() => {
+    return computedColumns.value.map((column) => ({
+        ...column,
+        class: {
+            'mc-table__table_header-cell': true,
+            'mc-table__table_header-cell--fixed-first': column.fixedFirst,
+            'mc-table__table_header-cell--fixed-last': column.fixedLast,
+            'mc-table__table_header-cell--shadow-first': column.fixedFirst && shadows.firstColHasShadow,
+            'mc-table__table_header-cell--shadow-last': column.fixedLast && shadows.lastColHasShadow
+        }
+    }));
+});
+const computedBodyColumns = computed(() => {
+    return computedColumns.value.map((column) => ({
+        ...column,
+        class: {
+            'mc-table__table_body-cell': true,
+            'mc-table__table_body-cell--fixed-first': column.fixedFirst,
+            'mc-table__table_body-cell--fixed-last': column.fixedLast,
+            'mc-table__table_body-cell--shadow-first': column.fixedFirst && shadows.firstColHasShadow,
+            'mc-table__table_body-cell--shadow-last': column.fixedLast && shadows.lastColHasShadow
+        }
+    }));
+});
+const computedFooterColumns = computed(() => {
+    return computedColumns.value.map((column) => ({
+        ...column,
+        class: {
+            'mc-table__table_footer-cell': true,
+            'mc-table__table_footer-cell--fixed-first': column.fixedFirst,
+            'mc-table__table_footer-cell--fixed-last': column.fixedLast,
+            'mc-table__table_footer-cell--shadow-first': column.fixedFirst && shadows.firstColHasShadow,
+            'mc-table__table_footer-cell--shadow-last': column.fixedLast && shadows.lastColHasShadow
+        }
+    }));
+});
+const containerStyle = computed(() => {
+    return {
+        '--mc-table-height': typeof props.height === 'number' ? `${props.height}px` : props.height,
+        '--mc-table-header-row-height': helper.isNumber(props.headerRowHeight) ? `${props.headerRowHeight}px` : '40px',
+        '--mc-table-row-height': helper.isNumber(props.rowHeight) ? `${props.rowHeight}px` : '40px',
+        '--mc-table-footer-row-height': helper.isNumber(props.footerRowHeight) ? `${props.footerRowHeight}px` : '40px'
+    };
+});
+const computedTableCardProps = computed(() => {
+    return {
+        tableColumns: props.columns,
+        tableData: props.data,
+        tableTotals: props.totals,
+        tableSort: props.sort,
+        tableHeaderRowHeight: props.headerRowHeight,
+        tableFooterRowHeight: props.footerRowHeight,
+        tableFixedFirstColumn: props.fixedFirstColumn,
+        tableCardProps: props.toTableCardProps
+    };
+});
+onMounted(() => {
+    addListeners();
+});
+onBeforeUnmount(() => {
+    removeListeners();
+});
+const onBodyScroll = useThrottleFn(() => {
+    if (mcTable.value) {
+        const { scrollLeft, scrollWidth, clientWidth } = mcTable.value;
+        const firstColShadow = props.fixedFirstColumn && scrollLeft > 0;
+        const lastColShadow = props.fixedLastColumn && scrollLeft + clientWidth < scrollWidth;
+        if (shadows.firstColHasShadow !== firstColShadow)
+            shadows.firstColHasShadow = firstColShadow;
+        if (shadows.lastColHasShadow !== lastColShadow)
+            shadows.lastColHasShadow = lastColShadow;
+    }
+}, 10);
+const addListeners = () => {
+    if (hasFixedColumn.value && mcTable.value) {
+        onBodyScroll();
+        mcTable.value.addEventListener('scroll', onBodyScroll);
+    }
+};
+const removeListeners = () => {
+    if (hasFixedColumn.value && mcTable.value)
+        mcTable.value.removeEventListener('scroll', onBodyScroll);
+};
+const handleRowClick = (row) => {
+    emit('row-click', row);
+};
+const handleSetCardState = (payload) => {
+    openCardState.value = payload;
+    emit('table-card-opened', payload);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        data: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        /**
+         * Тоталы таблицы (отображаются в футере), обьект ключи которого = поле field из массива колонок
+         * */
+        totals: {
+            type: Object,
+            default: () => ({})
+        },
+        sort: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         * Фиксировать ли первую колонку таблицы
+         * */
+        fixedFirstColumn: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Фиксировать ли последнюю колонку таблицы
+         * */
+        fixedLastColumn: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Есть ли у таблицы еще данные, если true, при полном пролистывании таблицы вниз, будет вызываться метод @loading
+         * */
+        hasLoadMore: {
+            type: Boolean,
+            default: true
+        },
+        height: {
+            type: [Number, String],
+            default: 'auto'
+        },
+        /**
+         * Высота строки в шапке
+         * */
+        headerRowHeight: {
+            type: Number,
+            default: TABLE.defaultHeaderHeight
+        },
+        /**
+         * Высота строки в теле таблицы
+         * */
+        rowHeight: {
+            type: Number,
+            default: TABLE.defaultRowHeight
+        },
+        /**
+         * Высота строки в подвале (строка с тоталами)
+         * */
+        footerRowHeight: {
+            type: Number,
+            default: TABLE.defaultFooterRowHeight
+        },
+        /**
+         *  Отрисовка всей таблицы и полоса загрузки в каждой ячейке (скелетная загрузка)
+         */
+        skeletonLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Лоадинг внизу таблицы
+         * */
+        bottomLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Оверлей с затемнение на всю таблицу
+         * */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Переводы плейсхолеров и текстов
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({})
+        },
+        noDataIcon: {
+            type: String,
+            default: null
+        },
+        noDataImg: {
+            type: String,
+            default: noTableDataImg
+        },
+        /**
+         * Любые данные что бы передать их в карточку из таблицы
+         * */
+        toTableCardProps: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __typeEmits: {},
+});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__container") }, ...{ style: ((__VLS_ctx.containerStyle)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("mcTable"), ...{ class: ("mc-table") }, });
+    // @ts-ignore navigation for `const mcTable = ref()`
+    __VLS_ctx.mcTable;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_header") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_header-row") }, });
+    for (const [column, cI] of __VLS_getVForSourceType((__VLS_ctx.computedHeaderColumns))) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ key: ((cI)), ...{ class: ((column.class)) }, ...{ style: ((column.style)) }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_header-cell_content") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_header-cell_content-left") }, });
+        if (column.sortable) {
+            const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.McTableSort;
+            /** @type { [typeof __VLS_components.McTableSort, typeof __VLS_components.mcTableSort, ] } */
+            // @ts-ignore
+            const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ 'onChange': {} }, column: ((column.field)), sort: ((__VLS_ctx.sort)), }));
+            const __VLS_2 = __VLS_1({ ...{ 'onChange': {} }, column: ((column.field)), sort: ((__VLS_ctx.sort)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+            let __VLS_6;
+            const __VLS_7 = {
+                onChange: ((val) => __VLS_ctx.emit('sort', val))
+            };
+            let __VLS_3;
+            let __VLS_4;
+            var __VLS_5;
+        }
+        var __VLS_8 = {
+            column: ((column)), cellIndex: ((cI)),
+        };
+        const __VLS_9 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
+        /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
+        // @ts-ignore
+        const __VLS_10 = __VLS_asFunctionalComponent(__VLS_9, new __VLS_9({ textAlign: ((column.align)), weight: ((__VLS_ctx.Weights.SemiBold)), preLine: (true), }));
+        const __VLS_11 = __VLS_10({ textAlign: ((column.align)), weight: ((__VLS_ctx.Weights.SemiBold)), preLine: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+        (column.header);
+        __VLS_nonNullable(__VLS_14.slots).default;
+        var __VLS_14;
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_header-cell_content-right") }, });
+        var __VLS_15 = {
+            column: ((column)), cellIndex: ((cI)),
+        };
+        var __VLS_16 = (`${column.field}-header-right`);
+        var __VLS_17 = {
+            column: ((column)), cellIndex: ((cI)),
+        };
+        var __VLS_18 = (`${column.field}-total`);
+        if (column.total) {
+            const __VLS_19 = __VLS_resolvedLocalAndGlobalComponents.McChip;
+            /** @type { [typeof __VLS_components.McChip, typeof __VLS_components.mcChip, ] } */
+            // @ts-ignore
+            const __VLS_20 = __VLS_asFunctionalComponent(__VLS_19, new __VLS_19({ title: ((column.total)), variation: ("hover-gray"), textColor: ("gray"), size: ((__VLS_ctx.ChipSize.S)), }));
+            const __VLS_21 = __VLS_20({ title: ((column.total)), variation: ("hover-gray"), textColor: ("gray"), size: ((__VLS_ctx.ChipSize.S)), }, ...__VLS_functionalComponentArgsRest(__VLS_20));
+        }
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_body") }, });
+    if (props.skeletonLoading) {
+        const __VLS_25 = __VLS_resolvedLocalAndGlobalComponents.McTableSkeletonLoading;
+        /** @type { [typeof __VLS_components.McTableSkeletonLoading, typeof __VLS_components.mcTableSkeletonLoading, ] } */
+        // @ts-ignore
+        const __VLS_26 = __VLS_asFunctionalComponent(__VLS_25, new __VLS_25({ columns: ((__VLS_ctx.computedBodyColumns)), }));
+        const __VLS_27 = __VLS_26({ columns: ((__VLS_ctx.computedBodyColumns)), }, ...__VLS_functionalComponentArgsRest(__VLS_26));
+    }
+    if (__VLS_ctx.hasData) {
+        for (const [row, rI] of __VLS_getVForSourceType((__VLS_ctx.data))) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onClick: (() => __VLS_ctx.handleRowClick(row)) }, key: ((rI)), ...{ class: ("mc-table__table_body-row") }, ...{ class: (({ 'mc-table__table_body-row--active': String(__VLS_ctx.openCardState.id) === String(row.id) })) }, });
+            for (const [column, cI] of __VLS_getVForSourceType((__VLS_ctx.computedBodyColumns))) {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ key: ((cI)), ...{ class: ((column.class)) }, ...{ style: ((column.style)) }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_body-cell_content") }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_body-cell_content-left") }, });
+                var __VLS_31 = {
+                    row: ((row)), rowIndex: ((rI)), column: ((column)), cellIndex: ((cI)), cellValue: ((row[column.field])),
+                };
+                var __VLS_32 = (column.field);
+                const __VLS_33 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
+                /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
+                // @ts-ignore
+                const __VLS_34 = __VLS_asFunctionalComponent(__VLS_33, new __VLS_33({ textAlign: ((column.align)), ellipsis: (true), }));
+                const __VLS_35 = __VLS_34({ textAlign: ((column.align)), ellipsis: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_34));
+                (row[column.field]);
+                __VLS_nonNullable(__VLS_38.slots).default;
+                var __VLS_38;
+                if (__VLS_ctx.slots[`${column.field}-right`]) {
+                    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_body-cell_content-right") }, });
+                    var __VLS_39 = {};
+                    var __VLS_40 = (`${column.field}-right`);
+                }
+            }
+        }
+    }
+    const __VLS_41 = __VLS_resolvedLocalAndGlobalComponents.McInfinityLoadingTrigger;
+    /** @type { [typeof __VLS_components.McInfinityLoadingTrigger, typeof __VLS_components.mcInfinityLoadingTrigger, ] } */
+    // @ts-ignore
+    const __VLS_42 = __VLS_asFunctionalComponent(__VLS_41, new __VLS_41({ ...{ 'onLoading': {} }, active: ((props.hasLoadMore)), }));
+    const __VLS_43 = __VLS_42({ ...{ 'onLoading': {} }, active: ((props.hasLoadMore)), }, ...__VLS_functionalComponentArgsRest(__VLS_42));
+    let __VLS_47;
+    const __VLS_48 = {
+        onLoading: (...[$event]) => {
+            __VLS_ctx.emit('loading');
+        }
+    };
+    let __VLS_44;
+    let __VLS_45;
+    var __VLS_46;
+    if (__VLS_ctx.hasTotals) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_footer") }, });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table__table_footer-row") }, });
+        for (const [column, cI] of __VLS_getVForSourceType((__VLS_ctx.computedFooterColumns))) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ key: ((cI)), ...{ class: ((column.class)) }, ...{ style: ((column.style)) }, });
+            var __VLS_49 = {
+                column: ((column)), cellIndex: ((cI)), cellValue: ((__VLS_ctx.totals[column.field])),
+            };
+            const __VLS_50 = __VLS_resolvedLocalAndGlobalComponents.McTitle;
+            /** @type { [typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, typeof __VLS_components.McTitle, typeof __VLS_components.mcTitle, ] } */
+            // @ts-ignore
+            const __VLS_51 = __VLS_asFunctionalComponent(__VLS_50, new __VLS_50({ textAlign: ((column.align)), weight: ((__VLS_ctx.Weights.SemiBold)), }));
+            const __VLS_52 = __VLS_51({ textAlign: ((column.align)), weight: ((__VLS_ctx.Weights.SemiBold)), }, ...__VLS_functionalComponentArgsRest(__VLS_51));
+            (__VLS_ctx.totals[column.field]);
+            __VLS_nonNullable(__VLS_55.slots).default;
+            var __VLS_55;
+        }
+    }
+    var __VLS_56 = {
+        ...{ onSetTableCardState: (__VLS_ctx.handleSetCardState) }, ...(__VLS_ctx.computedTableCardProps),
+    };
+    const __VLS_57 = __VLS_resolvedLocalAndGlobalComponents.RouterView;
+    /** @type { [typeof __VLS_components.RouterView, typeof __VLS_components.routerView, ] } */
+    // @ts-ignore
+    const __VLS_58 = __VLS_asFunctionalComponent(__VLS_57, new __VLS_57({ ...{ 'onSetTableCardState': {} }, ...(__VLS_ctx.computedTableCardProps), }));
+    const __VLS_59 = __VLS_58({ ...{ 'onSetTableCardState': {} }, ...(__VLS_ctx.computedTableCardProps), }, ...__VLS_functionalComponentArgsRest(__VLS_58));
+    let __VLS_63;
+    const __VLS_64 = {
+        onSetTableCardState: (__VLS_ctx.handleSetCardState)
+    };
+    let __VLS_60;
+    let __VLS_61;
+    var __VLS_62;
+    if (__VLS_ctx.bottomLoading) {
+        const __VLS_65 = __VLS_resolvedLocalAndGlobalComponents.McBottomLoader;
+        /** @type { [typeof __VLS_components.McBottomLoader, typeof __VLS_components.mcBottomLoader, ] } */
+        // @ts-ignore
+        const __VLS_66 = __VLS_asFunctionalComponent(__VLS_65, new __VLS_65({}));
+        const __VLS_67 = __VLS_66({}, ...__VLS_functionalComponentArgsRest(__VLS_66));
+    }
+    if (__VLS_ctx.loading) {
+        const __VLS_71 = __VLS_resolvedLocalAndGlobalComponents.McOverlay;
+        /** @type { [typeof __VLS_components.McOverlay, typeof __VLS_components.mcOverlay, ] } */
+        // @ts-ignore
+        const __VLS_72 = __VLS_asFunctionalComponent(__VLS_71, new __VLS_71({}));
+        const __VLS_73 = __VLS_72({}, ...__VLS_functionalComponentArgsRest(__VLS_72));
+    }
+    if (!__VLS_ctx.hasData) {
+        const __VLS_77 = __VLS_resolvedLocalAndGlobalComponents.McNoData;
+        /** @type { [typeof __VLS_components.McNoData, typeof __VLS_components.mcNoData, ] } */
+        // @ts-ignore
+        const __VLS_78 = __VLS_asFunctionalComponent(__VLS_77, new __VLS_77({ variation: ("small"), title: ((__VLS_ctx.placeholders.no_data)), img: ((props.noDataImg)), icon: ((props.noDataIcon)), }));
+        const __VLS_79 = __VLS_78({ variation: ("small"), title: ((__VLS_ctx.placeholders.no_data)), img: ((props.noDataImg)), icon: ((props.noDataIcon)), }, ...__VLS_functionalComponentArgsRest(__VLS_78));
+    }
+    __VLS_styleScopedClasses['mc-table__container'];
+    __VLS_styleScopedClasses['mc-table'];
+    __VLS_styleScopedClasses['mc-table__table'];
+    __VLS_styleScopedClasses['mc-table__table_header'];
+    __VLS_styleScopedClasses['mc-table__table_header-row'];
+    __VLS_styleScopedClasses['mc-table__table_header-cell_content'];
+    __VLS_styleScopedClasses['mc-table__table_header-cell_content-left'];
+    __VLS_styleScopedClasses['mc-table__table_header-cell_content-right'];
+    __VLS_styleScopedClasses['mc-table__table_body'];
+    __VLS_styleScopedClasses['mc-table__table_body-row'];
+    __VLS_styleScopedClasses['mc-table__table_body-row--active'];
+    __VLS_styleScopedClasses['mc-table__table_body-cell_content'];
+    __VLS_styleScopedClasses['mc-table__table_body-cell_content-left'];
+    __VLS_styleScopedClasses['mc-table__table_body-cell_content-right'];
+    __VLS_styleScopedClasses['mc-table__table_footer'];
+    __VLS_styleScopedClasses['mc-table__table_footer-row'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "mcTable": __VLS_nativeElements['div'],
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            ChipSize: ChipSize,
+            Weights: Weights,
+            McInfinityLoadingTrigger: McInfinityLoadingTrigger,
+            McTitle: McTitle,
+            McChip: McChip,
+            McTableSort: McTableSort,
+            McTableSkeletonLoading: McTableSkeletonLoading,
+            McNoData: McNoData,
+            McBottomLoader: McBottomLoader,
+            McOverlay: McOverlay,
+            emit: emit,
+            slots: slots,
+            openCardState: openCardState,
+            mcTable: mcTable,
+            hasData: hasData,
+            hasTotals: hasTotals,
+            placeholders: placeholders,
+            computedHeaderColumns: computedHeaderColumns,
+            computedBodyColumns: computedBodyColumns,
+            computedFooterColumns: computedFooterColumns,
+            containerStyle: containerStyle,
+            computedTableCardProps: computedTableCardProps,
+            handleRowClick: handleRowClick,
+            handleSetCardState: handleSetCardState,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        data: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        /**
+         * Тоталы таблицы (отображаются в футере), обьект ключи которого = поле field из массива колонок
+         * */
+        totals: {
+            type: Object,
+            default: () => ({})
+        },
+        sort: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         * Фиксировать ли первую колонку таблицы
+         * */
+        fixedFirstColumn: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Фиксировать ли последнюю колонку таблицы
+         * */
+        fixedLastColumn: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Есть ли у таблицы еще данные, если true, при полном пролистывании таблицы вниз, будет вызываться метод @loading
+         * */
+        hasLoadMore: {
+            type: Boolean,
+            default: true
+        },
+        height: {
+            type: [Number, String],
+            default: 'auto'
+        },
+        /**
+         * Высота строки в шапке
+         * */
+        headerRowHeight: {
+            type: Number,
+            default: TABLE.defaultHeaderHeight
+        },
+        /**
+         * Высота строки в теле таблицы
+         * */
+        rowHeight: {
+            type: Number,
+            default: TABLE.defaultRowHeight
+        },
+        /**
+         * Высота строки в подвале (строка с тоталами)
+         * */
+        footerRowHeight: {
+            type: Number,
+            default: TABLE.defaultFooterRowHeight
+        },
+        /**
+         *  Отрисовка всей таблицы и полоса загрузки в каждой ячейке (скелетная загрузка)
+         */
+        skeletonLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Лоадинг внизу таблицы
+         * */
+        bottomLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Оверлей с затемнение на всю таблицу
+         * */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Переводы плейсхолеров и текстов
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({})
+        },
+        noDataIcon: {
+            type: String,
+            default: null
+        },
+        noDataImg: {
+            type: String,
+            default: noTableDataImg
+        },
+        /**
+         * Любые данные что бы передать их в карточку из таблицы
+         * */
+        toTableCardProps: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        data: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        /**
+         * Тоталы таблицы (отображаются в футере), обьект ключи которого = поле field из массива колонок
+         * */
+        totals: {
+            type: Object,
+            default: () => ({})
+        },
+        sort: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         * Фиксировать ли первую колонку таблицы
+         * */
+        fixedFirstColumn: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Фиксировать ли последнюю колонку таблицы
+         * */
+        fixedLastColumn: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Есть ли у таблицы еще данные, если true, при полном пролистывании таблицы вниз, будет вызываться метод @loading
+         * */
+        hasLoadMore: {
+            type: Boolean,
+            default: true
+        },
+        height: {
+            type: [Number, String],
+            default: 'auto'
+        },
+        /**
+         * Высота строки в шапке
+         * */
+        headerRowHeight: {
+            type: Number,
+            default: TABLE.defaultHeaderHeight
+        },
+        /**
+         * Высота строки в теле таблицы
+         * */
+        rowHeight: {
+            type: Number,
+            default: TABLE.defaultRowHeight
+        },
+        /**
+         * Высота строки в подвале (строка с тоталами)
+         * */
+        footerRowHeight: {
+            type: Number,
+            default: TABLE.defaultFooterRowHeight
+        },
+        /**
+         *  Отрисовка всей таблицы и полоса загрузки в каждой ячейке (скелетная загрузка)
+         */
+        skeletonLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Лоадинг внизу таблицы
+         * */
+        bottomLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Оверлей с затемнение на всю таблицу
+         * */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Переводы плейсхолеров и текстов
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({})
+        },
+        noDataIcon: {
+            type: String,
+            default: null
+        },
+        noDataImg: {
+            type: String,
+            default: noTableDataImg
+        },
+        /**
+         * Любые данные что бы передать их в карточку из таблицы
+         * */
+        toTableCardProps: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */