mediacube-ui-v2 0.0.9 → 0.0.11

package/dist/components/patterns/McWrapScroll/McWrapScroll.vue.js

@@ -1,422 +0,0 @@
-import McGridRow from '../../patterns/McGridRow/McGridRow.vue';
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
-import { Spaces } from '@/types/styles/Spaces';
-import { ColumnAlignment, ColumnJustifyAlignment } from '@/enums/Grid';
-const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
-const emit = defineEmits(['content-scrolled']);
-const props = defineProps({
-    wrap: {
-        type: Boolean,
-        default: false
-    },
-    gutterY: {
-        type: Number,
-        default: 0
-    },
-    gutterX: {
-        type: Number,
-        default: 0
-    },
-    justify: {
-        type: String,
-        default: ColumnJustifyAlignment.Left
-    },
-    scrollable: {
-        type: Boolean,
-        default: true
-    },
-    gutterBottom: {
-        type: String,
-        default: null
-    },
-    hasScroll: {
-        type: Boolean,
-        default: false
-    },
-    withBlur: {
-        type: Boolean,
-        default: false
-    },
-    moreSpace: {
-        type: Boolean,
-        default: false
-    },
-    rtl: {
-        type: Boolean,
-        default: false
-    },
-    scrollSpeed: {
-        type: Number,
-        default: 1
-    },
-    tagName: {
-        type: String,
-        default: 'div'
-    }
-});
-const drag_options = reactive({
-    scroll_pos: 0,
-    start_client_pos: 0,
-    distance: 0,
-    is_drag: false,
-    mouse_is_down: false
-});
-const show_left_blur = ref(false);
-const show_right_blur = ref(false);
-const observer = ref(null);
-const scrollContainer = ref(null);
-const containerProps = computed(() => {
-    return {
-        wrap: props.wrap,
-        align: ColumnAlignment.Top,
-        gutterY: props.gutterY,
-        gutterX: props.gutterX,
-        justify: props.justify
-    };
-});
-const containerClasses = computed(() => {
-    return {
-        'mc-wrap-scroll': true,
-        'mc-wrap-scroll--scrollable': props.scrollable,
-        'mc-wrap-scroll--no-scrollbar': !props.hasScroll,
-        'mc-wrap-scroll--more-space': props.moreSpace
-    };
-});
-const containerStyles = computed(() => {
-    return {
-        '--mc-wrap-scroll-bottom': Spaces[props.gutterBottom]
-    };
-});
-const wrapperClasses = computed(() => {
-    return {
-        [`mc-wrap-scroll__wrapper--left-blur`]: props.withBlur && show_left_blur.value,
-        [`mc-wrap-scroll__wrapper--right-blur`]: props.withBlur && show_right_blur.value,
-        [`mc-wrap-scroll__wrapper--more-space`]: props.moreSpace
-    };
-});
-onMounted(() => {
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-    init();
-    setTimeout(() => handlerScroll(), 10);
-});
-onBeforeUnmount(() => {
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
-    scrollContainer.value && scrollContainer.value.removeEventListener('scroll', handlerScroll);
-    observer.value && observer.value.disconnect();
-});
-const init = () => {
-    if (scrollContainer.value) {
-        scrollContainer.value.addEventListener('scroll', handlerScroll);
-        if (props.withBlur)
-            createMutationObserver();
-    }
-};
-const handlerScroll = () => {
-    emit('content-scrolled');
-    if (!props.withBlur)
-        return;
-    if (scrollContainer.value) {
-        try {
-            const container_width = Math.ceil(scrollContainer.value.getBoundingClientRect()?.width);
-            const scroll_width = Math.ceil(scrollContainer.value.scrollWidth);
-            const scroll_left = Math.ceil(scrollContainer.value.scrollLeft);
-            // Левый блюр
-            show_left_blur.value = props.rtl
-                ? scroll_width > container_width && scroll_width - 10 > Math.abs(scroll_left) + container_width
-                : !!scroll_left;
-            // Правый блюр
-            show_right_blur.value = props.rtl
-                ? Math.abs(scroll_left) > 1
-                : scroll_width > container_width && scroll_width > Math.abs(scroll_left) + container_width;
-        }
-        catch (e) {
-            show_left_blur.value = false;
-            show_right_blur.value = false;
-        }
-    }
-};
-const createMutationObserver = () => {
-    if (scrollContainer.value) {
-        try {
-            observer.value = new MutationObserver(handlerScroll);
-            const config = {
-                attributes: true,
-                childList: true,
-                subtree: true
-            };
-            observer.value.observe(scrollContainer.value, config);
-        }
-        catch (e) {
-            console.error('Error when try to create observer in McWrapScroll');
-        }
-    }
-    else
-        console.error('Error when try to create observer in McWrapScroll');
-};
-const onMouseDown = (e) => {
-    if (scrollContainer.value) {
-        const dragOptions = drag_options;
-        dragOptions.start_client_pos = e.clientX;
-        dragOptions.mouse_is_down = true;
-        dragOptions.scroll_pos = scrollContainer.value.scrollLeft;
-        // // Удалить все выделения на странице, иначе скролл "лагает" если где то на странице есть выделение
-        if (window.getSelection) {
-            let sel = window.getSelection();
-            sel?.removeAllRanges();
-        }
-    }
-};
-const onMouseMove = (e) => {
-    if (scrollContainer.value) {
-        const dragOptions = drag_options;
-        if (!dragOptions.mouse_is_down)
-            return;
-        dragOptions.distance = e.clientX - dragOptions.start_client_pos;
-        if (Math.abs(dragOptions.distance) > 2 && !dragOptions.is_drag) {
-            dragOptions.is_drag = true;
-        }
-        if (dragOptions.is_drag) {
-            scrollContainer.value.scrollTo({
-                left: dragOptions.scroll_pos - dragOptions.distance * props.scrollSpeed
-            });
-        }
-        // Math.abs(dragOptions.scroll_pos) && (dragOptions.scroll_pos = 0)
-    }
-};
-const onMouseUp = () => {
-    drag_options.is_drag && (drag_options.is_drag = false);
-    drag_options.mouse_is_down = false;
-}; /* PartiallyEnd: #3632/scriptSetup.vue */
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    props: {
-        wrap: {
-            type: Boolean,
-            default: false
-        },
-        gutterY: {
-            type: Number,
-            default: 0
-        },
-        gutterX: {
-            type: Number,
-            default: 0
-        },
-        justify: {
-            type: String,
-            default: ColumnJustifyAlignment.Left
-        },
-        scrollable: {
-            type: Boolean,
-            default: true
-        },
-        gutterBottom: {
-            type: String,
-            default: null
-        },
-        hasScroll: {
-            type: Boolean,
-            default: false
-        },
-        withBlur: {
-            type: Boolean,
-            default: false
-        },
-        moreSpace: {
-            type: Boolean,
-            default: false
-        },
-        rtl: {
-            type: Boolean,
-            default: false
-        },
-        scrollSpeed: {
-            type: Number,
-            default: 1
-        },
-        tagName: {
-            type: String,
-            default: 'div'
-        }
-    },
-    emits: {},
-});
-;
-let __VLS_functionalComponentProps;
-function __VLS_template() {
-    const __VLS_ctx = {};
-    const __VLS_localComponents = {
-        ...{},
-        ...{},
-        ...__VLS_ctx,
-    };
-    let __VLS_components;
-    const __VLS_localDirectives = {
-        ...{},
-        ...__VLS_ctx,
-    };
-    let __VLS_directives;
-    let __VLS_styleScopedClasses;
-    // CSS variable injection 
-    // CSS variable injection end 
-    let __VLS_resolvedLocalAndGlobalComponents;
-    const __VLS_0 = ((props.tagName));
-    // @ts-ignore
-    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ class: ((__VLS_ctx.wrapperClasses)) }, ...{ class: ("mc-wrap-scroll__wrapper") }, }));
-    const __VLS_2 = __VLS_1({ ...{ class: ((__VLS_ctx.wrapperClasses)) }, ...{ class: ("mc-wrap-scroll__wrapper") }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-    var __VLS_6 = {};
-    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onMousedown: (__VLS_ctx.onMouseDown) }, ref: ("scrollContainer"), ...{ class: ((__VLS_ctx.containerClasses)) }, ...{ style: ((__VLS_ctx.containerStyles)) }, });
-    // @ts-ignore navigation for `const scrollContainer = ref()`
-    __VLS_ctx.scrollContainer;
-    // @ts-ignore
-    [McGridRow, McGridRow,];
-    // @ts-ignore
-    const __VLS_7 = __VLS_asFunctionalComponent(McGridRow, new McGridRow({ ...(__VLS_ctx.containerProps), ...{ style: (({ 'pointer-events': __VLS_ctx.drag_options.is_drag ? 'none' : 'auto' })) }, ...{ class: ("mc-wrap-scroll__row") }, }));
-    const __VLS_8 = __VLS_7({ ...(__VLS_ctx.containerProps), ...{ style: (({ 'pointer-events': __VLS_ctx.drag_options.is_drag ? 'none' : 'auto' })) }, ...{ class: ("mc-wrap-scroll__row") }, }, ...__VLS_functionalComponentArgsRest(__VLS_7));
-    var __VLS_12 = {};
-    __VLS_nonNullable(__VLS_11.slots).default;
-    var __VLS_11;
-    __VLS_nonNullable(__VLS_5.slots).default;
-    var __VLS_5;
-    __VLS_styleScopedClasses['mc-wrap-scroll__wrapper'];
-    __VLS_styleScopedClasses['mc-wrap-scroll__row'];
-    var __VLS_slots;
-    var __VLS_inheritedAttrs;
-    const __VLS_refs = {
-        "scrollContainer": __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 {
-            McGridRow: McGridRow,
-            drag_options: drag_options,
-            scrollContainer: scrollContainer,
-            containerProps: containerProps,
-            containerClasses: containerClasses,
-            containerStyles: containerStyles,
-            wrapperClasses: wrapperClasses,
-            onMouseDown: onMouseDown,
-        };
-    },
-    emits: {},
-    props: {
-        wrap: {
-            type: Boolean,
-            default: false
-        },
-        gutterY: {
-            type: Number,
-            default: 0
-        },
-        gutterX: {
-            type: Number,
-            default: 0
-        },
-        justify: {
-            type: String,
-            default: ColumnJustifyAlignment.Left
-        },
-        scrollable: {
-            type: Boolean,
-            default: true
-        },
-        gutterBottom: {
-            type: String,
-            default: null
-        },
-        hasScroll: {
-            type: Boolean,
-            default: false
-        },
-        withBlur: {
-            type: Boolean,
-            default: false
-        },
-        moreSpace: {
-            type: Boolean,
-            default: false
-        },
-        rtl: {
-            type: Boolean,
-            default: false
-        },
-        scrollSpeed: {
-            type: Number,
-            default: 1
-        },
-        tagName: {
-            type: String,
-            default: 'div'
-        }
-    },
-});
-const __VLS_component = (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    emits: {},
-    props: {
-        wrap: {
-            type: Boolean,
-            default: false
-        },
-        gutterY: {
-            type: Number,
-            default: 0
-        },
-        gutterX: {
-            type: Number,
-            default: 0
-        },
-        justify: {
-            type: String,
-            default: ColumnJustifyAlignment.Left
-        },
-        scrollable: {
-            type: Boolean,
-            default: true
-        },
-        gutterBottom: {
-            type: String,
-            default: null
-        },
-        hasScroll: {
-            type: Boolean,
-            default: false
-        },
-        withBlur: {
-            type: Boolean,
-            default: false
-        },
-        moreSpace: {
-            type: Boolean,
-            default: false
-        },
-        rtl: {
-            type: Boolean,
-            default: false
-        },
-        scrollSpeed: {
-            type: Number,
-            default: 1
-        },
-        tagName: {
-            type: String,
-            default: 'div'
-        }
-    },
-    __typeEl: {},
-});
-export default {};
-; /* PartiallyEnd: #4569/main.vue */