mediacube-ui-v2 0.0.28 → 0.0.30

package/dist/{types/src → src}/components/templates/McTable/McTableCard/McTableCard.vue.d.ts

@@ -1,6 +1,6 @@
-import { PropType } from 'vue';
-import { ITableColumn, ITableColumnWidth, ITableData, ITableSort, ITableTotals, TableCardState } from '../../../../types/ITable';
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { type PropType } from 'vue';
+import { type ITableColumn, type ITableColumnWidth, type ITableData, type ITableSort, type ITableTotals, type TableCardState } from '@/types/ITable';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
      * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
@@ -44,10 +44,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "set-table-card-state": (value: TableCardState) => any;
     "card-id-updated": (value: TableCardState) => any;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
      * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
@@ -104,7 +104,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     tableFixedFirstColumn: boolean;
     tableCardProps: Record<any, any>;
     footerBlur: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>, {
     header?(_: {}): any;
     default?(_: {
         tableColumns: ITableColumnWidth[];

package/dist/src/components/templates/McTable/McTableCard/McTableCard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McTableCard.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/templates/McTable/McTableCard/McTableCard.vue"],"names":[],"mappings":"AAAA,OAiPO,EAAwC,KAAK,QAAQ,EAAwB,MAAM,KAAK,CAAA;AAC/F,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAA;;IAuUrB;;;SAGK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAHL;;;SAGK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CP,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,339 @@
+import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue';
+import { TABLE } from '@/consts/table';
+import { useHelper } from '@/composables';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const slots = useSlots();
+const emit = defineEmits();
+/**
+ * Если карточка исползуется как отдельная страница!
+ *  1. Если карточка используется как рутовый узел страницы, то компонент McTableCard, автоматически получит все пропсы от таблицы
+ *  2. Если карточка используется НЕ как рутовый узел, нужно принять в компоненте все пропсы как в карточке, и передать их в компонент McTableCard
+ *
+ *  При использовании как описано в п1. Автоматически получит все пропсы от таблицы, так же будут доступны через slot-scope в дефолтном слоте.
+ * */
+const props = defineProps({
+    /**
+     * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
+     * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
+     * */
+    id: {
+        type: [String, Number]
+    },
+    tableColumns: {
+        type: Array,
+        default: () => []
+    },
+    tableData: {
+        type: Array,
+        default: () => []
+    },
+    tableTotals: {
+        type: Object,
+        default: () => ({})
+    },
+    tableSort: {
+        type: Object,
+        default: () => ({})
+    },
+    tableFixedFirstColumn: {
+        type: Boolean,
+        default: true
+    },
+    tableHeaderRowHeight: {
+        type: Number,
+        default: TABLE.defaultHeaderHeight
+    },
+    tableFooterRowHeight: {
+        type: Number,
+        default: TABLE.defaultFooterRowHeight
+    },
+    tableCardProps: {
+        type: Object,
+        default: () => ({})
+    },
+    footerBlur: {
+        type: Boolean,
+        default: false
+    }
+});
+const helper = useHelper();
+const tableFirstColWidth = computed(() => {
+    const [first] = props.tableColumns;
+    return first?.width ? first.width : TABLE.defaultTableFirstColWidth;
+});
+const bodyEl = ref(null);
+const body_scrolled_to_bottom = ref(true);
+const computedFooterClasses = computed(() => {
+    return {
+        'mc-table-card__footer': !!slots.footer,
+        'mc-table-card__footer--with-blur': props.footerBlur && !body_scrolled_to_bottom.value
+    };
+});
+const cardStyle = computed(() => {
+    const borderCompensations = -1;
+    return {
+        '--table-card-header-height': helper.isNumber(props.tableHeaderRowHeight)
+            ? `${props.tableHeaderRowHeight + borderCompensations}px`
+            : `${TABLE.defaultHeaderHeight}px`,
+        '--table-card-footer-height': helper.isNumber(props.tableFooterRowHeight)
+            ? `${props.tableFooterRowHeight + borderCompensations}px`
+            : `${TABLE.defaultFooterRowHeight}px`,
+        marginLeft: `${tableFirstColWidth.value}px`
+    };
+});
+onMounted(() => {
+    if (props.footerBlur) {
+        initBlur();
+    }
+    handleEmitTableCardState({ state: true, id: props.id });
+});
+onBeforeUnmount(() => {
+    bodyEl.value && bodyEl.value.removeEventListener('scroll', handlerScroll);
+    handleEmitTableCardState({ state: false });
+});
+const initBlur = () => {
+    try {
+        body_scrolled_to_bottom.value = false;
+        bodyEl.value && bodyEl.value.addEventListener('scroll', handlerScroll);
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+const handlerScroll = () => {
+    try {
+        if (bodyEl.value) {
+            const { offsetHeight, scrollTop, scrollHeight } = bodyEl.value;
+            body_scrolled_to_bottom.value = offsetHeight + scrollTop === scrollHeight;
+        }
+    }
+    catch (e) {
+        body_scrolled_to_bottom.value = true;
+        console.error(e);
+    }
+};
+const handleEmitTableCardState = (payload) => {
+    emit('set-table-card-state', payload);
+};
+watch(() => props.footerBlur, (val) => {
+    if (val) {
+        initBlur();
+    }
+    else {
+        bodyEl.value && bodyEl.value.removeEventListener('scroll', handlerScroll);
+    }
+});
+watch(() => props.id, (id) => {
+    const state = { state: true, id };
+    handleEmitTableCardState(state);
+    emit('card-id-updated', state);
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
+         * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
+         * */
+        id: {
+            type: [String, Number]
+        },
+        tableColumns: {
+            type: Array,
+            default: () => []
+        },
+        tableData: {
+            type: Array,
+            default: () => []
+        },
+        tableTotals: {
+            type: Object,
+            default: () => ({})
+        },
+        tableSort: {
+            type: Object,
+            default: () => ({})
+        },
+        tableFixedFirstColumn: {
+            type: Boolean,
+            default: true
+        },
+        tableHeaderRowHeight: {
+            type: Number,
+            default: TABLE.defaultHeaderHeight
+        },
+        tableFooterRowHeight: {
+            type: Number,
+            default: TABLE.defaultFooterRowHeight
+        },
+        tableCardProps: {
+            type: Object,
+            default: () => ({})
+        },
+        footerBlur: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __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-card") }, ...{ style: ((__VLS_ctx.cardStyle)) }, });
+    if (__VLS_ctx.$slots.header) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-card__header") }, });
+        var __VLS_0 = {};
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("bodyEl"), ...{ class: ("mc-table-card__body") }, });
+    // @ts-ignore navigation for `const bodyEl = ref()`
+    __VLS_ctx.bodyEl;
+    var __VLS_1 = {
+        ...(props),
+    };
+    if (__VLS_ctx.$slots.footer || __VLS_ctx.footerBlur) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ((__VLS_ctx.computedFooterClasses)) }, });
+        var __VLS_2 = {};
+    }
+    __VLS_styleScopedClasses['mc-table-card'];
+    __VLS_styleScopedClasses['mc-table-card__header'];
+    __VLS_styleScopedClasses['mc-table-card__body'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "bodyEl": __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 {
+            bodyEl: bodyEl,
+            computedFooterClasses: computedFooterClasses,
+            cardStyle: cardStyle,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
+         * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
+         * */
+        id: {
+            type: [String, Number]
+        },
+        tableColumns: {
+            type: Array,
+            default: () => []
+        },
+        tableData: {
+            type: Array,
+            default: () => []
+        },
+        tableTotals: {
+            type: Object,
+            default: () => ({})
+        },
+        tableSort: {
+            type: Object,
+            default: () => ({})
+        },
+        tableFixedFirstColumn: {
+            type: Boolean,
+            default: true
+        },
+        tableHeaderRowHeight: {
+            type: Number,
+            default: TABLE.defaultHeaderHeight
+        },
+        tableFooterRowHeight: {
+            type: Number,
+            default: TABLE.defaultFooterRowHeight
+        },
+        tableCardProps: {
+            type: Object,
+            default: () => ({})
+        },
+        footerBlur: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
+         * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
+         * */
+        id: {
+            type: [String, Number]
+        },
+        tableColumns: {
+            type: Array,
+            default: () => []
+        },
+        tableData: {
+            type: Array,
+            default: () => []
+        },
+        tableTotals: {
+            type: Object,
+            default: () => ({})
+        },
+        tableSort: {
+            type: Object,
+            default: () => ({})
+        },
+        tableFixedFirstColumn: {
+            type: Boolean,
+            default: true
+        },
+        tableHeaderRowHeight: {
+            type: Number,
+            default: TABLE.defaultHeaderHeight
+        },
+        tableFooterRowHeight: {
+            type: Number,
+            default: TABLE.defaultFooterRowHeight
+        },
+        tableCardProps: {
+            type: Object,
+            default: () => ({})
+        },
+        footerBlur: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/dist/{types/src → src}/components/templates/McTable/McTableCard/McTableCardHeader/McTableCardHeader.vue.d.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue';
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import type { PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     buttonBackText: {
         type: PropType<string>;
         default: string;
@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: PropType<string>;
         default: null;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     buttonBackText: {
         type: PropType<string>;
         default: string;
@@ -20,7 +20,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
 }>> & Readonly<{}>, {
     buttonBackText: string;
     backTo: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLElement>, {
     default?(_: {}): any;
     right?(_: {}): any;
 }>;

package/dist/src/components/templates/McTable/McTableCard/McTableCardHeader/McTableCardHeader.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McTableCardHeader.vue.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/templates/McTable/McTableCard/McTableCardHeader/McTableCardHeader.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AAuInC,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,118 @@
+import { McButton, McSvgIcon } from '@/components';
+import { ButtonSize } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    buttonBackText: {
+        type: String,
+        default: 'Back'
+    },
+    backTo: {
+        type: String,
+        default: null
+    }
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        buttonBackText: {
+            type: String,
+            default: 'Back'
+        },
+        backTo: {
+            type: String,
+            default: null
+        }
+    },
+});
+;
+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.section, __VLS_intrinsicElements.section)({ ...{ class: ("mc-table-card-header") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-card-header__left") }, });
+    var __VLS_0 = {};
+    const __VLS_1 = __VLS_resolvedLocalAndGlobalComponents.McButton;
+    /** @type { [typeof __VLS_components.McButton, typeof __VLS_components.mcButton, typeof __VLS_components.McButton, typeof __VLS_components.mcButton, ] } */
+    // @ts-ignore
+    const __VLS_2 = __VLS_asFunctionalComponent(__VLS_1, new __VLS_1({ to: ((props.backTo)), exact: (true), variation: ("purple-link"), size: ((__VLS_ctx.ButtonSize.Xs)), }));
+    const __VLS_3 = __VLS_2({ to: ((props.backTo)), exact: (true), variation: ("purple-link"), size: ((__VLS_ctx.ButtonSize.Xs)), }, ...__VLS_functionalComponentArgsRest(__VLS_2));
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_6.slots);
+        const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
+        /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
+        // @ts-ignore
+        const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ name: ("arrow_backward"), }));
+        const __VLS_9 = __VLS_8({ name: ("arrow_backward"), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+    }
+    (props.buttonBackText);
+    var __VLS_6;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-card-header__right") }, });
+    var __VLS_13 = {};
+    __VLS_styleScopedClasses['mc-table-card-header'];
+    __VLS_styleScopedClasses['mc-table-card-header__left'];
+    __VLS_styleScopedClasses['mc-table-card-header__right'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            McButton: McButton,
+            McSvgIcon: McSvgIcon,
+            ButtonSize: ButtonSize,
+        };
+    },
+    props: {
+        buttonBackText: {
+            type: String,
+            default: 'Back'
+        },
+        backTo: {
+            type: String,
+            default: null
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        buttonBackText: {
+            type: String,
+            default: 'Back'
+        },
+        backTo: {
+            type: String,
+            default: null
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/dist/src/components/templates/McTable/McTableSkeletonLoading/McTableSkeletonLoading.vue.d.ts

@@ -0,0 +1,19 @@
+import { type PropType } from 'vue';
+import type { ITableColumnEnriched } from '@/types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<ITableColumnEnriched[]>;
+        required: true;
+        default: () => ITableColumnEnriched[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<ITableColumnEnriched[]>;
+        required: true;
+        default: () => ITableColumnEnriched[];
+    };
+}>> & Readonly<{}>, {
+    columns: ITableColumnEnriched[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;
+//# sourceMappingURL=McTableSkeletonLoading.vue.d.ts.map

package/dist/src/components/templates/McTable/McTableSkeletonLoading/McTableSkeletonLoading.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McTableSkeletonLoading.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/templates/McTable/McTableSkeletonLoading/McTableSkeletonLoading.vue"],"names":[],"mappings":"AAAA,OA6JO,EAAY,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AAC7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;;;;;;;;;;;;;;;;AAsHnD,wBAaG"}

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

@@ -0,0 +1,118 @@
+import { computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    columns: {
+        type: Array,
+        required: true,
+        default: () => []
+    }
+});
+const firstColsWidth = computed(() => {
+    const [firstColumn] = props.columns;
+    return firstColumn.width;
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+            default: () => []
+        }
+    },
+});
+;
+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.section, __VLS_intrinsicElements.section)({ ...{ class: ("mc-table-skeleton-loading skeleton-load-wrapper") }, });
+    for (const [column, i] of __VLS_getVForSourceType((props.columns))) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ style: ((column.style)) }, ...{ class: ("mc-table-skeleton-loading__col") }, key: ((`skeleton-col__${i}`)), });
+        for (const [cell, cellI] of __VLS_getVForSourceType((36))) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ key: ((`skeleton-cell-${cellI}`)), ...{ class: ("mc-table-skeleton-loading__cell") }, });
+            if (!cellI) {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader mc-table-skeleton-loading__loader--more-height") }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader_line") }, });
+            }
+            if (!i) {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader") }, ...{ style: (({ minWidth: `${__VLS_ctx.firstColsWidth}px` })) }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader_avatar") }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader_preview-content") }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader_line") }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader_line") }, });
+            }
+            else {
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader") }, });
+                __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-table-skeleton-loading__loader_line") }, });
+            }
+        }
+    }
+    __VLS_styleScopedClasses['mc-table-skeleton-loading'];
+    __VLS_styleScopedClasses['skeleton-load-wrapper'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__col'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__cell'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader--more-height'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader_line'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader_avatar'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader_preview-content'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader_line'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader_line'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader'];
+    __VLS_styleScopedClasses['mc-table-skeleton-loading__loader_line'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            firstColsWidth: firstColsWidth,
+        };
+    },
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+            default: () => []
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        columns: {
+            type: Array,
+            required: true,
+            default: () => []
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */