mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,271 @@
+import { onMounted, ref, watch } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits();
+const props = defineProps({
+    /*
+     * Состояние
+     */
+    active: {
+        type: Boolean,
+        default: false
+    },
+    /*
+     * Продолжительность тоггла
+     */
+    duration: {
+        type: Number,
+        default: 300
+    },
+    type: {
+        type: String,
+        default: 'ease-out'
+    },
+    /*
+     * Если нужен другой тег
+     */
+    tag: {
+        type: String,
+        default: 'div'
+    },
+    /*
+     * Применять ли атрибут hidden
+     * к элементы при закрытии
+     */
+    useHidden: {
+        type: Boolean,
+        default: true
+    }
+});
+const open = ref(props.active);
+const animation_in_progress = ref(false);
+const animation = ref(null);
+const container = ref();
+onMounted(() => {
+    init();
+});
+const init = () => {
+    if (container.value && !open.value) {
+        container.value.style.height = '0';
+    }
+};
+const animate = () => {
+    if (!container.value || animation_in_progress.value)
+        return;
+    animation_in_progress.value = true;
+    // Получаем фактическую высоту содержимого
+    const contentHeight = container.value.scrollHeight;
+    const payload = {
+        contentHeight
+    };
+    // Отменяем предыдущую анимацию, если она была
+    if (animation.value) {
+        animation.value.cancel();
+    }
+    open.value ? handleClose(payload) : handleOpen(payload);
+};
+const toggleOpenValue = () => {
+    open.value = !open.value;
+};
+const handleClose = ({ contentHeight }) => {
+    emit('slide-close-start', open.value);
+    if (container.value) {
+        animation.value = container.value.animate([{ height: `${contentHeight}px` }, { height: '0' }], {
+            duration: props.duration,
+            easing: props.type,
+            fill: 'forwards'
+        });
+        animation.value.onfinish = () => {
+            emit('slide-close-end', open.value);
+            animation_in_progress.value = false;
+            toggleOpenValue();
+        };
+    }
+};
+const handleOpen = ({ contentHeight }) => {
+    emit('slide-open-start', open.value);
+    if (container.value) {
+        animation.value = container.value.animate([{ height: '0' }, { height: `${contentHeight}px` }], {
+            duration: props.duration,
+            easing: props.type,
+            fill: 'forwards'
+        });
+        animation.value.onfinish = () => {
+            emit('slide-open-end', open.value);
+            animation_in_progress.value = false;
+            toggleOpenValue();
+        };
+    }
+};
+watch(() => props.active, () => {
+    animate();
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /*
+         * Состояние
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /*
+         * Продолжительность тоггла
+         */
+        duration: {
+            type: Number,
+            default: 300
+        },
+        type: {
+            type: String,
+            default: 'ease-out'
+        },
+        /*
+         * Если нужен другой тег
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /*
+         * Применять ли атрибут hidden
+         * к элементы при закрытии
+         */
+        useHidden: {
+            type: Boolean,
+            default: true
+        }
+    },
+    __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;
+    const __VLS_0 = ((props.tag));
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ref: ("container"), ...{ class: ("mc-slide-up-down") }, }));
+    const __VLS_2 = __VLS_1({ ref: ("container"), ...{ class: ("mc-slide-up-down") }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    // @ts-ignore navigation for `const container = ref()`
+    __VLS_ctx.container;
+    var __VLS_6 = {};
+    var __VLS_7 = {};
+    __VLS_nonNullable(__VLS_5.slots).default;
+    var __VLS_5;
+    __VLS_styleScopedClasses['mc-slide-up-down'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "container": __VLS_6,
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            container: container,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /*
+         * Состояние
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /*
+         * Продолжительность тоггла
+         */
+        duration: {
+            type: Number,
+            default: 300
+        },
+        type: {
+            type: String,
+            default: 'ease-out'
+        },
+        /*
+         * Если нужен другой тег
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /*
+         * Применять ли атрибут hidden
+         * к элементы при закрытии
+         */
+        useHidden: {
+            type: Boolean,
+            default: true
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /*
+         * Состояние
+         */
+        active: {
+            type: Boolean,
+            default: false
+        },
+        /*
+         * Продолжительность тоггла
+         */
+        duration: {
+            type: Number,
+            default: 300
+        },
+        type: {
+            type: String,
+            default: 'ease-out'
+        },
+        /*
+         * Если нужен другой тег
+         */
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        /*
+         * Применять ли атрибут hidden
+         * к элементы при закрытии
+         */
+        useHidden: {
+            type: Boolean,
+            default: true
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

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

@@ -0,0 +1,180 @@
+import { ref, onMounted, onUnmounted, computed, h, useSlots, createApp } from 'vue';
+import { Spaces } from '@/types';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    visibleCount: {
+        type: Number,
+        default: Infinity
+    },
+    collapsed: {
+        type: Boolean,
+        default: false
+    }
+});
+const slots = useSlots();
+const container = ref(null);
+const children = (slots.default && slots.default()[0].children?.length
+    ? slots.default()[0].children
+    : //@ts-ignore
+        slots.default()) || [];
+//@ts-ignore
+const visibleChildren = ref(children || []);
+const hiddenCount = ref(0);
+const classes = computed(() => {
+    return {
+        'mc-stack': true,
+        'mc-stack--collapsed': props.collapsed
+    };
+});
+const updateChildrenVisible = () => {
+    if (!container.value)
+        return;
+    let totalWidth = 0;
+    const visibleItems = [];
+    let itemCount = 0;
+    hiddenCount.value = 0;
+    const tempContainer = document.createElement('div');
+    tempContainer.style.position = 'absolute';
+    tempContainer.style.visibility = 'hidden';
+    tempContainer.style.whiteSpace = 'nowrap';
+    document.body.appendChild(tempContainer);
+    //@ts-ignore
+    for (const item of children) {
+        const vnode = h(item);
+        const itemNode = document.createElement('div');
+        tempContainer.appendChild(itemNode);
+        const app = createApp({ render: () => vnode });
+        app.mount(itemNode);
+        const itemWidth = props.collapsed
+            ? itemNode.getBoundingClientRect().width + 6
+            : itemNode.getBoundingClientRect().width;
+        app.unmount();
+        itemNode.remove();
+        const moreContentWidth = +Spaces['300'].replace('px', '');
+        const itemIndent = props.collapsed ? -Spaces['200'].replace('px', '') : +Spaces['150'].replace('px', '');
+        if (totalWidth + (itemWidth + itemIndent) <= container.value.clientWidth - moreContentWidth &&
+            itemCount < props.visibleCount) {
+            totalWidth += itemWidth + itemIndent;
+            visibleItems.push(item);
+            itemCount++;
+        }
+        else {
+            //@ts-ignore
+            hiddenCount.value = children.length - visibleItems.length;
+            break;
+        }
+    }
+    document.body.removeChild(tempContainer);
+    visibleChildren.value = visibleItems;
+};
+onMounted(() => {
+    const resizeObserver = new ResizeObserver(updateChildrenVisible);
+    if (container.value)
+        resizeObserver.observe(container.value);
+    updateChildrenVisible();
+    onUnmounted(() => {
+        resizeObserver.disconnect();
+    });
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        visibleCount: {
+            type: Number,
+            default: Infinity
+        },
+        collapsed: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+;
+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: ("container"), ...{ class: ((__VLS_ctx.classes)) }, });
+    // @ts-ignore navigation for `const container = ref()`
+    __VLS_ctx.container;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("content"), ...{ class: ("mc-stack__content") }, });
+    // @ts-ignore navigation for `const content = ref()`
+    __VLS_ctx.content;
+    for (const [child, i] of __VLS_getVForSourceType((__VLS_ctx.visibleChildren))) {
+        const __VLS_0 = ((child));
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({}));
+        const __VLS_2 = __VLS_1({}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    }
+    if (__VLS_ctx.hiddenCount > 0) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-stack__more-label") }, });
+        (__VLS_ctx.hiddenCount);
+    }
+    __VLS_styleScopedClasses['mc-stack__content'];
+    __VLS_styleScopedClasses['mc-stack__more-label'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "container": __VLS_nativeElements['div'],
+        "content": __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 {
+            container: container,
+            visibleChildren: visibleChildren,
+            hiddenCount: hiddenCount,
+            classes: classes,
+        };
+    },
+    props: {
+        visibleCount: {
+            type: Number,
+            default: Infinity
+        },
+        collapsed: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        visibleCount: {
+            type: Number,
+            default: Infinity
+        },
+        collapsed: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */