mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,136 @@
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import { computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits();
+const props = defineProps({
+    sort: {
+        type: Object,
+        default: () => ({})
+    },
+    column: {
+        type: String,
+        default: null
+    }
+});
+const isActive = computed(() => {
+    return props.column === props.sort.sort_column;
+});
+const sortState = computed(() => {
+    switch (true) {
+        case props.sort.sort_direction === 'asc' && isActive.value:
+            return {
+                direction: 'asc',
+                next_direction: 'desc',
+                icon: 'arrow_downward'
+            };
+        case props.sort.sort_direction === 'desc' && isActive.value:
+            return {
+                direction: 'desc',
+                next_direction: 'asc',
+                icon: 'arrow_upward'
+            };
+        default:
+            return {
+                direction: null,
+                next_direction: 'asc',
+                icon: 'arrow_up_down'
+            };
+    }
+});
+const handleSortChange = () => {
+    emit('change', {
+        sort_column: props.column,
+        sort_direction: sortState.value.next_direction
+    });
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        sort: {
+            type: Object,
+            default: () => ({})
+        },
+        column: {
+            type: String,
+            default: null
+        }
+    },
+    __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)({ ...{ onClick: (__VLS_ctx.handleSortChange) }, ...{ class: ("mc-table-sort") }, });
+    // @ts-ignore
+    [McSvgIcon,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ size: ("200"), name: ((__VLS_ctx.sortState.icon)), color: ((__VLS_ctx.isActive ? 'black' : 'gray')), }));
+    const __VLS_1 = __VLS_0({ size: ("200"), name: ((__VLS_ctx.sortState.icon)), color: ((__VLS_ctx.isActive ? 'black' : 'gray')), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    __VLS_styleScopedClasses['mc-table-sort'];
+    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 {
+            McSvgIcon: McSvgIcon,
+            isActive: isActive,
+            sortState: sortState,
+            handleSortChange: handleSortChange,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        sort: {
+            type: Object,
+            default: () => ({})
+        },
+        column: {
+            type: String,
+            default: null
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        sort: {
+            type: Object,
+            default: () => ({})
+        },
+        column: {
+            type: String,
+            default: null
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/templates/McTopBar/McTopBar.vue.js

@@ -0,0 +1,309 @@
+import McAvatar from '@/components/elements/McAvatar/McAvatar.vue';
+import McButton from '@/components/elements/McButton/McButton.vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import McSeparator from '@/components/elements/McSeparator/McSeparator.vue';
+import McDropdown from '@/components/patterns/McDropdown/McDropdown.vue';
+import { ref } from 'vue';
+import { ButtonSize, DropdownPositions, HorizontalAlignment } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    /**
+     *  Данные пользователя
+     *
+     */
+    user: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Меню языков
+     *
+     */
+    menuLangs: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Локализация или текст по умолчанию
+     *
+     */
+    defaultLang: {
+        type: String,
+        default: 'Выберите язык'
+    },
+    /**
+     *  Текущая локализация
+     *
+     */
+    currentLang: {
+        type: String,
+        default: null
+    }
+});
+const menuLangsDD = ref(null);
+const localesDropdownOpen = ref(false);
+const userDropdownOpen = ref(false); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Данные пользователя
+         *
+         */
+        user: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Меню языков
+         *
+         */
+        menuLangs: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Локализация или текст по умолчанию
+         *
+         */
+        defaultLang: {
+            type: String,
+            default: 'Выберите язык'
+        },
+        /**
+         *  Текущая локализация
+         *
+         */
+        currentLang: {
+            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.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-top-bar") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-top-bar__inner") }, });
+    if (__VLS_ctx.$slots.left) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-top-bar__left") }, });
+        var __VLS_0 = {};
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-top-bar__right") }, });
+    var __VLS_1 = {};
+    if (__VLS_ctx.menuLangs && __VLS_ctx.menuLangs.length) {
+        // @ts-ignore
+        [McDropdown, McDropdown,];
+        // @ts-ignore
+        const __VLS_2 = __VLS_asFunctionalComponent(McDropdown, new McDropdown({ ref: ("menuLangsDD"), items: ((__VLS_ctx.menuLangs)), modelValue: ((__VLS_ctx.localesDropdownOpen)), listMinWidth: ("auto"), ...{ class: ("mc-top-bar__menu-langs") }, }));
+        const __VLS_3 = __VLS_2({ ref: ("menuLangsDD"), items: ((__VLS_ctx.menuLangs)), modelValue: ((__VLS_ctx.localesDropdownOpen)), listMinWidth: ("auto"), ...{ class: ("mc-top-bar__menu-langs") }, }, ...__VLS_functionalComponentArgsRest(__VLS_2));
+        // @ts-ignore navigation for `const menuLangsDD = ref()`
+        __VLS_ctx.menuLangsDD;
+        var __VLS_7 = {};
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { activator: __VLS_thisSlot } = __VLS_nonNullable(__VLS_6.slots);
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(McButton, new McButton({ variation: ("black-link"), uppercase: (true), }));
+            const __VLS_9 = __VLS_8({ variation: ("black-link"), uppercase: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+            (__VLS_ctx.currentLang || __VLS_ctx.defaultLang);
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_12.slots);
+                // @ts-ignore
+                [McSvgIcon,];
+                // @ts-ignore
+                const __VLS_13 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ ...{ class: ("rotate") }, name: ("arrow_drop_down"), }));
+                const __VLS_14 = __VLS_13({ ...{ class: ("rotate") }, name: ("arrow_drop_down"), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+            }
+            var __VLS_12;
+        }
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { item: __VLS_thisSlot } = __VLS_nonNullable(__VLS_6.slots);
+            const [{ item }] = __VLS_getSlotParams(__VLS_thisSlot);
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_18 = __VLS_asFunctionalComponent(McButton, new McButton({ to: ((item.to || item.href)), exact: ((item.exact)), variation: ("black-flat"), textAlign: ((__VLS_ctx.HorizontalAlignment.Left)), fullWidth: (true), }));
+            const __VLS_19 = __VLS_18({ to: ((item.to || item.href)), exact: ((item.exact)), variation: ("black-flat"), textAlign: ((__VLS_ctx.HorizontalAlignment.Left)), fullWidth: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_22.slots);
+                // @ts-ignore
+                [McSvgIcon,];
+                // @ts-ignore
+                const __VLS_23 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: `flag_${item.name.toLowerCase()}`, }));
+                const __VLS_24 = __VLS_23({ name: `flag_${item.name.toLowerCase()}`, }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+            }
+            (item.name);
+            var __VLS_22;
+        }
+        var __VLS_6;
+    }
+    var __VLS_28 = {};
+    if (props.user) {
+        // @ts-ignore
+        [McDropdown, McDropdown,];
+        // @ts-ignore
+        const __VLS_29 = __VLS_asFunctionalComponent(McDropdown, new McDropdown({ modelValue: ((__VLS_ctx.userDropdownOpen)), position: ((__VLS_ctx.DropdownPositions.Right)), }));
+        const __VLS_30 = __VLS_29({ modelValue: ((__VLS_ctx.userDropdownOpen)), position: ((__VLS_ctx.DropdownPositions.Right)), }, ...__VLS_functionalComponentArgsRest(__VLS_29));
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { activator: __VLS_thisSlot } = __VLS_nonNullable(__VLS_33.slots);
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_34 = __VLS_asFunctionalComponent(McButton, new McButton({ variation: ("white-flat"), size: ((__VLS_ctx.ButtonSize.MCompact)), }));
+            const __VLS_35 = __VLS_34({ variation: ("white-flat"), size: ((__VLS_ctx.ButtonSize.MCompact)), }, ...__VLS_functionalComponentArgsRest(__VLS_34));
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_38.slots);
+                // @ts-ignore
+                [McAvatar,];
+                // @ts-ignore
+                const __VLS_39 = __VLS_asFunctionalComponent(McAvatar, new McAvatar({ src: ((props.user.avatar)), rounded: (true), size: ("400"), }));
+                const __VLS_40 = __VLS_39({ src: ((props.user.avatar)), rounded: (true), size: ("400"), }, ...__VLS_functionalComponentArgsRest(__VLS_39));
+            }
+            var __VLS_38;
+        }
+        var __VLS_44 = {};
+        var __VLS_33;
+    }
+    // @ts-ignore
+    [McSeparator,];
+    // @ts-ignore
+    const __VLS_45 = __VLS_asFunctionalComponent(McSeparator, new McSeparator({ color: ("hover-gray"), indentTop: ("100"), }));
+    const __VLS_46 = __VLS_45({ color: ("hover-gray"), indentTop: ("100"), }, ...__VLS_functionalComponentArgsRest(__VLS_45));
+    var __VLS_50 = {};
+    __VLS_styleScopedClasses['mc-top-bar'];
+    __VLS_styleScopedClasses['mc-top-bar__inner'];
+    __VLS_styleScopedClasses['mc-top-bar__left'];
+    __VLS_styleScopedClasses['mc-top-bar__right'];
+    __VLS_styleScopedClasses['mc-top-bar__menu-langs'];
+    __VLS_styleScopedClasses['rotate'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "menuLangsDD": __VLS_7,
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            McAvatar: McAvatar,
+            McButton: McButton,
+            McSvgIcon: McSvgIcon,
+            McSeparator: McSeparator,
+            McDropdown: McDropdown,
+            ButtonSize: ButtonSize,
+            DropdownPositions: DropdownPositions,
+            HorizontalAlignment: HorizontalAlignment,
+            menuLangsDD: menuLangsDD,
+            localesDropdownOpen: localesDropdownOpen,
+            userDropdownOpen: userDropdownOpen,
+        };
+    },
+    props: {
+        /**
+         *  Данные пользователя
+         *
+         */
+        user: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Меню языков
+         *
+         */
+        menuLangs: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Локализация или текст по умолчанию
+         *
+         */
+        defaultLang: {
+            type: String,
+            default: 'Выберите язык'
+        },
+        /**
+         *  Текущая локализация
+         *
+         */
+        currentLang: {
+            type: String,
+            default: null
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         *  Данные пользователя
+         *
+         */
+        user: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Меню языков
+         *
+         */
+        menuLangs: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Локализация или текст по умолчанию
+         *
+         */
+        defaultLang: {
+            type: String,
+            default: 'Выберите язык'
+        },
+        /**
+         *  Текущая локализация
+         *
+         */
+        currentLang: {
+            type: String,
+            default: null
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/templates/McVirtualScroll/McVirtualScroll.vue.js

@@ -0,0 +1,239 @@
+import { ref, onMounted, nextTick, watch, computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    /**
+     * Массив данных для рендеринга
+     * */
+    items: {
+        type: Array,
+        default: () => [],
+        required: true
+    },
+    /**
+     * Высота контейнера скролла
+     * */
+    containerHeight: {
+        type: Number,
+        required: true
+    },
+    /**
+     * Высота 1 элемента списка
+     * */
+    itemHeight: {
+        type: Number,
+        default: 20,
+        required: true
+    },
+    /**
+     * Буфер для подгрузки дополнительных элементов вне видимой области
+     * */
+    buffer: {
+        type: Number,
+        default: 1
+    }
+});
+const containerRef = ref(null);
+const scrollTop = ref(0);
+const visibleItems = ref([]);
+const totalHeight = ref(0);
+const styles = computed(() => {
+    return {
+        height: `${props.containerHeight}px`,
+        overflowY: 'auto',
+        position: 'relative'
+    };
+});
+const calculateTotalHeight = () => {
+    totalHeight.value = props.items.length * props.itemHeight;
+};
+const calculateVisibleItems = () => {
+    const containerHeight = containerRef.value?.clientHeight || 0;
+    const startIndex = Math.floor(scrollTop.value / props.itemHeight);
+    const endIndex = Math.min(props.items.length - 1, Math.floor((scrollTop.value + containerHeight) / props.itemHeight));
+    const buffer = props.buffer || 5;
+    const result = [];
+    for (let i = Math.max(0, startIndex - buffer); i <= Math.min(endIndex + buffer, props.items.length - 1); i++) {
+        result.push({
+            key: i,
+            data: props.items[i],
+            index: i,
+            top: i * props.itemHeight
+        });
+    }
+    visibleItems.value = result;
+};
+const onScroll = () => {
+    scrollTop.value = containerRef.value?.scrollTop || 0;
+    requestAnimationFrame(calculateVisibleItems);
+};
+onMounted(() => {
+    calculateTotalHeight();
+    nextTick(calculateVisibleItems);
+});
+watch(() => props.items, () => {
+    calculateTotalHeight();
+    nextTick(calculateVisibleItems);
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * Массив данных для рендеринга
+         * */
+        items: {
+            type: Array,
+            default: () => [],
+            required: true
+        },
+        /**
+         * Высота контейнера скролла
+         * */
+        containerHeight: {
+            type: Number,
+            required: true
+        },
+        /**
+         * Высота 1 элемента списка
+         * */
+        itemHeight: {
+            type: Number,
+            default: 20,
+            required: true
+        },
+        /**
+         * Буфер для подгрузки дополнительных элементов вне видимой области
+         * */
+        buffer: {
+            type: Number,
+            default: 1
+        }
+    },
+});
+;
+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)({ ...{ onScroll: (__VLS_ctx.onScroll) }, ...{ class: ("mc-virtual-scroll") }, ref: ("containerRef"), ...{ style: ((__VLS_ctx.styles)) }, });
+    // @ts-ignore navigation for `const containerRef = ref()`
+    __VLS_ctx.containerRef;
+    for (const [item] of __VLS_getVForSourceType((__VLS_ctx.visibleItems))) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ key: ((`mc-virtual-scroll__item-${item.key}`)), ...{ class: ("mc-virtual-scroll__item") }, ...{ style: (({ top: `${item.top}px` })) }, });
+        var __VLS_0 = {
+            item: ((item.data)), index: ((item.index)),
+        };
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ style: (({ height: `${__VLS_ctx.totalHeight}px` })) }, });
+    __VLS_styleScopedClasses['mc-virtual-scroll'];
+    __VLS_styleScopedClasses['mc-virtual-scroll__item'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "containerRef": __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 {
+            containerRef: containerRef,
+            visibleItems: visibleItems,
+            totalHeight: totalHeight,
+            styles: styles,
+            onScroll: onScroll,
+        };
+    },
+    props: {
+        /**
+         * Массив данных для рендеринга
+         * */
+        items: {
+            type: Array,
+            default: () => [],
+            required: true
+        },
+        /**
+         * Высота контейнера скролла
+         * */
+        containerHeight: {
+            type: Number,
+            required: true
+        },
+        /**
+         * Высота 1 элемента списка
+         * */
+        itemHeight: {
+            type: Number,
+            default: 20,
+            required: true
+        },
+        /**
+         * Буфер для подгрузки дополнительных элементов вне видимой области
+         * */
+        buffer: {
+            type: Number,
+            default: 1
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         * Массив данных для рендеринга
+         * */
+        items: {
+            type: Array,
+            default: () => [],
+            required: true
+        },
+        /**
+         * Высота контейнера скролла
+         * */
+        containerHeight: {
+            type: Number,
+            required: true
+        },
+        /**
+         * Высота 1 элемента списка
+         * */
+        itemHeight: {
+            type: Number,
+            default: 20,
+            required: true
+        },
+        /**
+         * Буфер для подгрузки дополнительных элементов вне видимой области
+         * */
+        buffer: {
+            type: Number,
+            default: 1
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/dist/composables/index.js

@@ -0,0 +1,8 @@
+import { useModal } from './useModal';
+import { useDrawer } from './useDrawer';
+import { useTooltip } from './useTooltip';
+import { useRandomNumber } from './useRandomNumber';
+import { useFieldErrors } from './useFieldErrors';
+import { useHelper } from './useHelper';
+import { UseEncodeDecode } from '@/composables/useEncodeDecode';
+export { useModal, useDrawer, useTooltip, useRandomNumber, useFieldErrors, useHelper, UseEncodeDecode };