mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,422 @@
+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 */