mediacube-ui-v2 0.0.7 → 0.0.9

package/dist/components/elements/McDraggable/McDraggable.vue.js

@@ -0,0 +1,280 @@
+import { useDebounceFn, useDraggable, useLocalStorage, useSessionStorage } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+import McPreview from '@/components/patterns/McPreview/McPreview.vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const localStorage = useLocalStorage('McDraggable', {});
+const sessionStorage = useSessionStorage('McDraggable', {});
+const draggable_el = ref(null);
+const debounce = useDebounceFn((method) => {
+    method();
+}, 100);
+const props = defineProps({
+    /**
+     * Дизайн:
+     * purple, red, orange и т.д.
+     */
+    variation: {
+        type: String,
+        default: 'purple'
+    },
+    initial: {
+        type: Object,
+        default: () => ({
+            x: 0,
+            y: 0
+        })
+    },
+    /**
+     * Key for save position to storage (**required**, if savePosition = true)
+     * */
+    cardId: {
+        type: [String, Number]
+    },
+    savePosition: {
+        type: Boolean,
+        default: false
+    },
+    storageType: {
+        type: String,
+        default: 'session'
+    }
+});
+const uniqueId = computed(() => {
+    return props.cardId;
+});
+const isSessionStorageType = computed(() => {
+    return props.storageType === 'session';
+});
+const isLocalStorageType = computed(() => {
+    return props.storageType === 'local';
+});
+const initialPositions = computed(() => {
+    let local_x = props.initial.x || 0;
+    let local_y = props.initial.y || 0;
+    if (props.savePosition && !uniqueId.value)
+        console.warn('cardId prop required, if savePosition = true');
+    if (!uniqueId.value || !props.savePosition)
+        return { x: local_x, y: local_y };
+    if (isSessionStorageType.value) {
+        //@ts-ignore
+        const { x, y } = sessionStorage.value[uniqueId.value] || {};
+        local_x = x;
+        local_y = y;
+    }
+    if (isLocalStorageType.value) {
+        //@ts-ignore
+        const { x, y } = localStorage.value[uniqueId.value] || {};
+        local_x = x;
+        local_y = y;
+    }
+    return { x: local_x || 0, y: local_y || 0 };
+});
+const { x, y, style } = useDraggable(draggable_el, {
+    initialValue: { x: initialPositions.value.x, y: initialPositions.value.y }
+});
+const styles = computed(() => {
+    return {
+        '--mc-draggable-color': Colors[props.variation]
+    };
+});
+const handleSavePosition = () => {
+    if (!uniqueId.value)
+        return;
+    if (isSessionStorageType.value) {
+        sessionStorage.value = {
+            ...sessionStorage.value,
+            [uniqueId.value]: { x: x.value, y: y.value }
+        };
+    }
+    if (isLocalStorageType.value) {
+        localStorage.value = {
+            ...localStorage.value,
+            [uniqueId.value]: { x: x.value, y: y.value }
+        };
+    }
+};
+watch(() => style.value, () => {
+    if (!props.savePosition)
+        return;
+    debounce(handleSavePosition);
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * Дизайн:
+         * purple, red, orange и т.д.
+         */
+        variation: {
+            type: String,
+            default: 'purple'
+        },
+        initial: {
+            type: Object,
+            default: () => ({
+                x: 0,
+                y: 0
+            })
+        },
+        /**
+         * Key for save position to storage (**required**, if savePosition = true)
+         * */
+        cardId: {
+            type: [String, Number]
+        },
+        savePosition: {
+            type: Boolean,
+            default: false
+        },
+        storageType: {
+            type: String,
+            default: 'session'
+        }
+    },
+});
+;
+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)({ ref: ("draggable_el"), ...{ class: ("mc-draggable") }, ...{ style: ((__VLS_ctx.style)) }, ...{ style: ({}) }, });
+    // @ts-ignore navigation for `const draggable_el = ref()`
+    __VLS_ctx.draggable_el;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-draggable__inner") }, ...{ style: ((__VLS_ctx.styles)) }, });
+    // @ts-ignore
+    [McPreview, McPreview,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McPreview, new McPreview({}));
+    const __VLS_1 = __VLS_0({}, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { left: __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
+        var __VLS_5 = {};
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { top: __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
+        var __VLS_6 = {};
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { bottom: __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
+        var __VLS_7 = {};
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { right: __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
+        var __VLS_8 = {};
+    }
+    var __VLS_4;
+    __VLS_styleScopedClasses['mc-draggable'];
+    __VLS_styleScopedClasses['mc-draggable__inner'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "draggable_el": __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 {
+            McPreview: McPreview,
+            draggable_el: draggable_el,
+            style: style,
+            styles: styles,
+        };
+    },
+    props: {
+        /**
+         * Дизайн:
+         * purple, red, orange и т.д.
+         */
+        variation: {
+            type: String,
+            default: 'purple'
+        },
+        initial: {
+            type: Object,
+            default: () => ({
+                x: 0,
+                y: 0
+            })
+        },
+        /**
+         * Key for save position to storage (**required**, if savePosition = true)
+         * */
+        cardId: {
+            type: [String, Number]
+        },
+        savePosition: {
+            type: Boolean,
+            default: false
+        },
+        storageType: {
+            type: String,
+            default: 'session'
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         * Дизайн:
+         * purple, red, orange и т.д.
+         */
+        variation: {
+            type: String,
+            default: 'purple'
+        },
+        initial: {
+            type: Object,
+            default: () => ({
+                x: 0,
+                y: 0
+            })
+        },
+        /**
+         * Key for save position to storage (**required**, if savePosition = true)
+         * */
+        cardId: {
+            type: [String, Number]
+        },
+        savePosition: {
+            type: Boolean,
+            default: false
+        },
+        storageType: {
+            type: String,
+            default: 'session'
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */