mediacube-ui-v2 0.0.28 → 0.0.30

package/dist/src/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'
+    };
+});
+onMounted(() => {
+    calculateTotalHeight();
+    nextTick(calculateVisibleItems);
+});
+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);
+};
+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/src/composables/index.d.ts

@@ -0,0 +1,8 @@
+export { useDrawer } from './useDrawer';
+export { UseEncodeDecode } from '@/composables/useEncodeDecode';
+export { useFieldErrors } from './useFieldErrors';
+export { useHelper } from './useHelper';
+export { useModal } from './useModal';
+export { useRandomNumber } from './useRandomNumber';
+export { useTooltip } from './useTooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/composables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/{types/src/composables/index.d.ts → src/composables/index.js}

@@ -1,8 +1,7 @@
 export { useDrawer } from './useDrawer';
-export { UseEncodeDecode } from './useEncodeDecode';
+export { UseEncodeDecode } from '@/composables/useEncodeDecode';
 export { useFieldErrors } from './useFieldErrors';
 export { useHelper } from './useHelper';
 export { useModal } from './useModal';
 export { useRandomNumber } from './useRandomNumber';
 export { useTooltip } from './useTooltip';
-//# sourceMappingURL=index.d.ts.map

package/dist/{types/src → src}/composables/useDrawer.d.ts

@@ -1,4 +1,4 @@
-import { IDrawerProps } from '../types/IDrawer';
+import type { IDrawerProps } from '@/types/IDrawer';
 export declare function useDrawer(): {
     showDrawer: (componentName: string, drawerProps?: Partial<IDrawerProps>, componentProps?: {}) => void;
     closeDrawer: (componentName: string) => void;

package/dist/src/composables/useDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../../../src/composables/useDrawer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,YAAY,EAAgB,MAAM,iBAAiB,CAAA;AA+EtF,wBAAgB,SAAS;;;;EAQxB"}

package/dist/src/composables/useDrawer.js

@@ -0,0 +1,72 @@
+import { reactive, h, render, getCurrentInstance, shallowRef, markRaw } from 'vue';
+import DrawerContainer from '@/components/templates/McDrawer/McDrawerContainer.vue';
+const closeServiceState = () => {
+    drawerServiceState.isOpen = false;
+    reactiveProps.drawers = [];
+};
+const drawerServiceState = reactive({
+    isOpen: false,
+    closeServiceState: closeServiceState
+});
+const drawerComponents = shallowRef({});
+const reactiveProps = reactive({ drawers: [] });
+const createDrawerContainer = () => {
+    const drawerContainerElement = document.createElement('div');
+    drawerContainerElement.id = 'drawer-container';
+    document.body.appendChild(drawerContainerElement);
+    const vnode = h(DrawerContainer, { drawerServiceState, reactiveProps });
+    render(vnode, drawerContainerElement);
+};
+// Если компонент DrawerContainer ещё не был добавлен в DOM, создаем его
+const ensureDrawerContainerExists = () => {
+    if (!document.getElementById('drawer-container')) {
+        createDrawerContainer();
+    }
+};
+const showDrawer = (componentName, // Component name from drawerComponents: {...}
+drawerProps = {}, componentProps = {}) => {
+    //@ts-ignore
+    if (!drawerComponents.value[componentName]) {
+        return console.warn('The component is not provided in Mediacube-ui DS\n' +
+            'Check and add to app.use(MediacubeUI, { drawerComponents: {...} })');
+    }
+    ensureDrawerContainerExists();
+    const id = Date.now();
+    const newDrawer = {
+        //@ts-ignore
+        component: markRaw(drawerComponents.value[componentName]),
+        componentName: componentName,
+        drawerProps: drawerProps,
+        componentProps: componentProps,
+        modelValue: true,
+        id,
+        close: () => {
+            //@ts-ignore
+            const drawerToClose = reactiveProps.drawers.findLast((d) => d.id === id);
+            drawerToClose && (drawerToClose.modelValue = false);
+            setTimeout(() => {
+                reactiveProps.drawers = reactiveProps.drawers.filter((d) => d.id !== drawerToClose?.id);
+            }, drawerProps?.duration || 300);
+        }
+    };
+    reactiveProps.drawers.push(newDrawer);
+    drawerServiceState.isOpen = true;
+};
+const closeDrawer = (componentName) => {
+    //@ts-ignore
+    const drawerToClose = reactiveProps.drawers.findLast((d) => d.componentName === componentName);
+    drawerToClose && drawerToClose.close();
+};
+const closeAllDrawers = () => {
+    reactiveProps.drawers.forEach((d) => {
+        d.close();
+    });
+};
+export function useDrawer() {
+    //@ts-ignore
+    const { proxy } = getCurrentInstance();
+    if (proxy.$dsOptions?.drawerComponents) {
+        drawerComponents.value = proxy.$dsOptions.drawerComponents;
+    }
+    return { showDrawer, closeDrawer, closeAllDrawers };
+}

package/dist/src/composables/useEncodeDecode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEncodeDecode.d.ts","sourceRoot":"","sources":["../../../src/composables/useEncodeDecode.ts"],"names":[],"mappings":"AAAA,cAAM,eAAe;IACnB,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM;IAS3B,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CASnC;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/src/composables/useEncodeDecode.js

@@ -0,0 +1,25 @@
+class UseEncodeDecode {
+    static encode(value) {
+        if (value.constructor !== Object)
+            return value;
+        try {
+            return btoa(encodeURI(JSON.stringify(value)));
+        }
+        catch (e) {
+            console.error(e);
+            return value;
+        }
+    }
+    static decode(value) {
+        if (!value)
+            return value;
+        try {
+            return JSON.parse(decodeURI(atob(value)));
+        }
+        catch (e) {
+            console.error(e);
+            return value;
+        }
+    }
+}
+export { UseEncodeDecode };

package/dist/src/composables/useFieldErrors.d.ts

@@ -0,0 +1,6 @@
+export declare function useFieldErrors(errors: string[]): {
+    is_error_visible: import("vue").Ref<boolean, boolean>;
+    errorText: import("vue").ComputedRef<string | null>;
+    toggleErrorVisible: () => void;
+};
+//# sourceMappingURL=useFieldErrors.d.ts.map

package/dist/src/composables/useFieldErrors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldErrors.d.ts","sourceRoot":"","sources":["../../../src/composables/useFieldErrors.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE;;;8BAYd,IAAI;EASpC"}

package/dist/src/composables/useFieldErrors.js

@@ -0,0 +1,20 @@
+import { computed, ref, watch } from 'vue';
+export function useFieldErrors(errors) {
+    const is_error_visible = ref(true);
+    const errorText = computed(() => {
+        if (errors === null || !errors?.length || !is_error_visible.value)
+            return null;
+        return errors.join(', ')?.replace(/-/gm, '‑');
+    });
+    watch(() => errors, () => {
+        is_error_visible.value = false;
+    });
+    const toggleErrorVisible = () => {
+        is_error_visible.value = false;
+    };
+    return {
+        is_error_visible,
+        errorText,
+        toggleErrorVisible
+    };
+}

package/dist/src/composables/useHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHelper.d.ts","sourceRoot":"","sources":["../../../src/composables/useHelper.ts"],"names":[],"mappings":"AAAA,iBAAS,OAAO,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CASpC;AAED,iBAAS,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAsBxC;AAED,iBAAS,SAAS,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG,CAclC;AAED,iBAAS,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAO,GAAG,CAAC,EAAE,CAOzE;AAED,iBAAS,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,OAQ1C;AAED,iBAAS,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,WAEhD;AACD,iBAAS,QAAQ,CAAC,OAAO,EAAE,GAAG,WAE7B;AAED,iBAAS,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGvC;AAED,wBAAgB,SAAS;;;;;;;;;EAExB"}

package/dist/src/composables/useHelper.js

@@ -0,0 +1,79 @@
+function isEmpty(value) {
+    if (value == null)
+        return true;
+    if (Array.isArray(value) || typeof value === 'string') {
+        return value.length === 0;
+    }
+    if (typeof value === 'object') {
+        return Object.keys(value).length === 0;
+    }
+    return false;
+}
+function isEqual(value1, value2) {
+    if (value1 === value2) {
+        return true;
+    }
+    if (typeof value1 !== 'object' || typeof value2 !== 'object' || value1 === null || value2 === null) {
+        return false;
+    }
+    if (Array.isArray(value1) !== Array.isArray(value2)) {
+        return false;
+    }
+    const keys1 = Object.keys(value1);
+    const keys2 = Object.keys(value2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        if (!isEqual(value1[key], value2[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+function cloneDeep(value) {
+    if (value === null || typeof value !== 'object') {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map(cloneDeep);
+    }
+    const clonedObj = {};
+    for (const key in value) {
+        if (hasProperty(value, key)) {
+            clonedObj[key] = cloneDeep(value[key]);
+        }
+    }
+    return clonedObj;
+}
+function uniqWith(array, comparator) {
+    return array.reduce((acc, current) => {
+        if (!acc.some((item) => comparator(item, current))) {
+            acc.push(current);
+        }
+        return acc;
+    }, []);
+}
+function deepMerge(target, source) {
+    for (const key in source) {
+        if (source[key] instanceof Object && key in target) {
+            Object.assign(source[key], deepMerge(target[key], source[key]));
+        }
+    }
+    Object.assign(target || {}, source);
+    return target;
+}
+function hasProperty(object, prop) {
+    return Object.prototype.hasOwnProperty.call(object, prop);
+}
+function isNumber(payload) {
+    return typeof payload === 'number';
+}
+function upperFirst(str) {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+export function useHelper() {
+    return { isEmpty, isEqual, cloneDeep, uniqWith, deepMerge, hasProperty, isNumber, upperFirst };
+}

package/dist/src/composables/useModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../../src/composables/useModal.ts"],"names":[],"mappings":"AA+EA,wBAAgB,QAAQ;;;;EAQvB"}

package/dist/src/composables/useModal.js

@@ -0,0 +1,71 @@
+import { reactive, h, render, getCurrentInstance, shallowRef, markRaw } from 'vue';
+import ModalContainer from '@/components/templates/McModal/McModalContainer.vue';
+const closeServiceState = () => {
+    modalServiceState.isOpen = false;
+    reactiveProps.modals = [];
+};
+const modalServiceState = reactive({
+    isOpen: false,
+    closeServiceState: closeServiceState
+});
+const modalComponents = shallowRef({});
+const reactiveProps = reactive({ modals: [] });
+const createModalContainer = () => {
+    const modalContainerElement = document.createElement('div');
+    modalContainerElement.id = 'modal-container';
+    document.body.appendChild(modalContainerElement);
+    const vnode = h(ModalContainer, { modalServiceState, reactiveProps });
+    render(vnode, modalContainerElement);
+};
+// Если компонент ModalContainer ещё не был добавлен в DOM, создаем его
+const ensureModalContainerExists = () => {
+    if (!document.getElementById('modal-container')) {
+        createModalContainer();
+    }
+};
+const showModal = (componentName, // Component name from modalComponents: {...}
+componentProps = {}) => {
+    //@ts-ignore
+    if (!modalComponents.value[componentName]) {
+        return console.warn('The component is not provided in Mediacube-ui DS\n' +
+            'Check and add to app.use(MediacubeUI, { modalComponents: {...} })');
+    }
+    ensureModalContainerExists();
+    const id = Date.now();
+    const newModal = {
+        //@ts-ignore
+        component: markRaw(modalComponents.value[componentName]),
+        componentName: componentName,
+        componentProps: componentProps,
+        modelValue: true,
+        id,
+        close: () => {
+            //@ts-ignore
+            const modalToClose = reactiveProps.modals.findLast((d) => d.id === id);
+            modalToClose && (modalToClose.modelValue = false);
+            setTimeout(() => {
+                reactiveProps.modals = reactiveProps.modals.filter((d) => d.id !== modalToClose?.id);
+            }, 300);
+        }
+    };
+    reactiveProps.modals.push(newModal);
+    modalServiceState.isOpen = true;
+};
+const closeModal = (componentName) => {
+    //@ts-ignore
+    const modalToClose = reactiveProps.modals.findLast((d) => d.componentName === componentName);
+    modalToClose && modalToClose.close();
+};
+const closeAllModals = () => {
+    reactiveProps.modals.forEach((d) => {
+        d.close();
+    });
+};
+export function useModal() {
+    //@ts-ignore
+    const { proxy } = getCurrentInstance();
+    if (proxy.$dsOptions?.modalComponents) {
+        modalComponents.value = proxy.$dsOptions.modalComponents;
+    }
+    return { showModal, closeModal, closeAllModals };
+}

package/dist/src/composables/useRandomNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRandomNumber.d.ts","sourceRoot":"","sources":["../../../src/composables/useRandomNumber.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,aAAa,GAAE,MAAU,GAAG,MAAM,CAK3D;AAED,wBAAgB,eAAe;;EAE9B"}

package/dist/src/composables/useRandomNumber.js

@@ -0,0 +1,10 @@
+export function timestamp(postfixLength = 0) {
+    if (!postfixLength)
+        return Date.now();
+    const min = Math.pow(10, postfixLength - 1);
+    const max = Math.pow(10, postfixLength) - 1;
+    return +(String(Date.now()) + String(Math.floor(Math.random() * (max - min + 1)) + min));
+}
+export function useRandomNumber() {
+    return { timestamp };
+}

package/dist/{types/src → src}/composables/useTooltip.d.ts

@@ -1,4 +1,4 @@
-import { ITooltip } from '../types/ITooltip';
+import { type ITooltip } from '@/types/ITooltip';
 export declare function useTooltip(): {
     mounted(el: HTMLElement, binding: {
         value: ITooltip;

package/dist/src/composables/useTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/composables/useTooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAA8C,MAAM,kBAAkB,CAAA;AA6J5F,wBAAgB,UAAU;gBAGV,WAAW,WAAW;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE;;;EAaxD"}