mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,246 @@
+import { adaptiveAdditionalProps, adaptivePropsParams, adaptivePropsSizes } from '@/utils/mcGridColAdaptiveProps';
+import { computed, inject } from 'vue';
+import { useHelper } from '@/composables';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const helper = useHelper();
+const provideData = inject('provideData', { gutterX: 0, gutterY: 0 });
+const props = defineProps({
+    ...adaptiveAdditionalProps,
+    /**
+     *  Кол-во колонок (всего 12)
+     */
+    span: { type: [String] },
+    /**
+     *  Очерёдность
+     */
+    order: { type: Number },
+    /**
+     *  Отступ (margin-left)
+     */
+    offset: { type: Number },
+    /**
+     *  Отступ (left)
+     */
+    push: { type: Number },
+    /**
+     *  Отступ (right)
+     */
+    pull: { type: Number },
+    /**
+     *  Автоматически тянущаяся колонка
+     *  на всё свободное пространство
+     */
+    stretchSelf: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Основа флекса, которая является начальным размером элемента
+     *  (указывать с единицами измерения: px, %...)
+     */
+    basis: {
+        type: String,
+        default: 'auto'
+    }
+});
+const classes = computed(() => {
+    const list = {};
+    adaptivePropsParams.forEach((value) => {
+        //@ts-ignore
+        list[`mc-grid-col--${value}-${props[value]}`] = !!props[value];
+        adaptivePropsSizes.forEach((size) => {
+            //@ts-ignore
+            const sizeValue = props[`${value}${helper.upperFirst(size)}`];
+            list[`mc-grid-col--${value}-${size}-${sizeValue}`] = !!sizeValue;
+        });
+    });
+    return list;
+});
+const styles = computed(() => {
+    let colStyle = {};
+    if (provideData.gutterX !== 0) {
+        colStyle['padding-left'] = `${provideData.gutterX / 2}px`;
+        colStyle['padding-right'] = `${provideData.gutterX / 2}px`;
+    }
+    if (provideData.gutterY !== 0) {
+        colStyle['padding-top'] = `${provideData.gutterY / 2}px`;
+        colStyle['padding-bottom'] = `${provideData.gutterY / 2}px`;
+    }
+    if (props.stretchSelf) {
+        colStyle['flex'] = `1 0 ${props.basis}`;
+    }
+    else if (props.basis !== 'auto') {
+        colStyle['flex'] = `0 0 ${props.basis}`;
+    }
+    return props.order ? { ...colStyle, order: props.order } : colStyle;
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        ...adaptiveAdditionalProps,
+        /**
+         *  Кол-во колонок (всего 12)
+         */
+        span: { type: [String] },
+        /**
+         *  Очерёдность
+         */
+        order: { type: Number },
+        /**
+         *  Отступ (margin-left)
+         */
+        offset: { type: Number },
+        /**
+         *  Отступ (left)
+         */
+        push: { type: Number },
+        /**
+         *  Отступ (right)
+         */
+        pull: { type: Number },
+        /**
+         *  Автоматически тянущаяся колонка
+         *  на всё свободное пространство
+         */
+        stretchSelf: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Основа флекса, которая является начальным размером элемента
+         *  (указывать с единицами измерения: px, %...)
+         */
+        basis: {
+            type: String,
+            default: 'auto'
+        }
+    },
+});
+;
+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)({ ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, ...{ class: ("mc-grid-col") }, });
+    var __VLS_0 = {};
+    __VLS_styleScopedClasses['mc-grid-col'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            classes: classes,
+            styles: styles,
+        };
+    },
+    props: {
+        ...adaptiveAdditionalProps,
+        /**
+         *  Кол-во колонок (всего 12)
+         */
+        span: { type: [String] },
+        /**
+         *  Очерёдность
+         */
+        order: { type: Number },
+        /**
+         *  Отступ (margin-left)
+         */
+        offset: { type: Number },
+        /**
+         *  Отступ (left)
+         */
+        push: { type: Number },
+        /**
+         *  Отступ (right)
+         */
+        pull: { type: Number },
+        /**
+         *  Автоматически тянущаяся колонка
+         *  на всё свободное пространство
+         */
+        stretchSelf: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Основа флекса, которая является начальным размером элемента
+         *  (указывать с единицами измерения: px, %...)
+         */
+        basis: {
+            type: String,
+            default: 'auto'
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        ...adaptiveAdditionalProps,
+        /**
+         *  Кол-во колонок (всего 12)
+         */
+        span: { type: [String] },
+        /**
+         *  Очерёдность
+         */
+        order: { type: Number },
+        /**
+         *  Отступ (margin-left)
+         */
+        offset: { type: Number },
+        /**
+         *  Отступ (left)
+         */
+        push: { type: Number },
+        /**
+         *  Отступ (right)
+         */
+        pull: { type: Number },
+        /**
+         *  Автоматически тянущаяся колонка
+         *  на всё свободное пространство
+         */
+        stretchSelf: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Основа флекса, которая является начальным размером элемента
+         *  (указывать с единицами измерения: px, %...)
+         */
+        basis: {
+            type: String,
+            default: 'auto'
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

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

@@ -0,0 +1,292 @@
+import { computed, provide } from 'vue';
+import { ColumnAlignment, ColumnJustifyAlignment } from '@/enums/Grid';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    /**
+     *  Расстояние между колонками по горизонтали
+     */
+    gutterX: {
+        type: Number,
+        default: 0
+    },
+    /**
+     *  Расстояние между колонками по вертикали
+     */
+    gutterY: {
+        type: Number,
+        default: 0
+    },
+    /**
+     *  Выравнивание по горизонтали
+     */
+    justify: {
+        type: String,
+        default: ColumnJustifyAlignment.Left
+    },
+    /**
+     *  Выравнивание по вертикали
+     */
+    align: {
+        type: String,
+        default: ColumnAlignment.Top
+    },
+    /**
+     *  Автоматически тянущиеся колонки
+     */
+    stretch: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Перенос колонок
+     */
+    wrap: {
+        type: Boolean,
+        default: true
+    }
+});
+provide('provideData', { gutterX: props.gutterX, gutterY: props.gutterY });
+const classes = computed(() => {
+    return {
+        [`mc-grid-row--justify-${props.justify}`]: !!props.justify,
+        [`mc-grid-row--align-${props.align}`]: !!props.align,
+        ['mc-grid-row--stretch']: !!props.stretch
+    };
+});
+const styles = computed(() => {
+    let result = {};
+    if (props.gutterX !== 0) {
+        result['margin-left'] = `${-props.gutterX / 2}px`;
+        result['margin-right'] = `${-props.gutterX / 2}px`;
+    }
+    if (props.gutterY !== 0) {
+        result['margin-top'] = `${-props.gutterY / 2}px`;
+        result['margin-bottom'] = `${-props.gutterY / 2}px`;
+    }
+    if (props.wrap) {
+        result['flex-wrap'] = 'wrap';
+    }
+    let justify;
+    switch (props.justify) {
+        case 'left':
+            justify = 'flex-start';
+            break;
+        case 'right':
+            justify = 'flex-end';
+            break;
+        case 'center':
+            justify = 'center';
+            break;
+        case 'around':
+            justify = 'space-around';
+            break;
+        case 'between':
+            justify = 'space-between';
+            break;
+    }
+    let align;
+    switch (props.align) {
+        case 'top':
+            align = 'flex-start';
+            break;
+        case 'middle':
+            align = 'center';
+            break;
+        case 'bottom':
+            align = 'flex-end';
+            break;
+        case 'stretch':
+            align = 'stretch';
+            break;
+    }
+    if (align)
+        result['--mc-grid-row-align'] = align;
+    if (justify)
+        result['--mc-grid-row-justify'] = justify;
+    return result;
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Расстояние между колонками по горизонтали
+         */
+        gutterX: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Расстояние между колонками по вертикали
+         */
+        gutterY: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Выравнивание по горизонтали
+         */
+        justify: {
+            type: String,
+            default: ColumnJustifyAlignment.Left
+        },
+        /**
+         *  Выравнивание по вертикали
+         */
+        align: {
+            type: String,
+            default: ColumnAlignment.Top
+        },
+        /**
+         *  Автоматически тянущиеся колонки
+         */
+        stretch: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Перенос колонок
+         */
+        wrap: {
+            type: Boolean,
+            default: true
+        }
+    },
+});
+;
+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)({ ...{ class: ("mc-grid-row") }, ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
+    var __VLS_0 = {};
+    __VLS_styleScopedClasses['mc-grid-row'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            classes: classes,
+            styles: styles,
+        };
+    },
+    props: {
+        /**
+         *  Расстояние между колонками по горизонтали
+         */
+        gutterX: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Расстояние между колонками по вертикали
+         */
+        gutterY: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Выравнивание по горизонтали
+         */
+        justify: {
+            type: String,
+            default: ColumnJustifyAlignment.Left
+        },
+        /**
+         *  Выравнивание по вертикали
+         */
+        align: {
+            type: String,
+            default: ColumnAlignment.Top
+        },
+        /**
+         *  Автоматически тянущиеся колонки
+         */
+        stretch: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Перенос колонок
+         */
+        wrap: {
+            type: Boolean,
+            default: true
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         *  Расстояние между колонками по горизонтали
+         */
+        gutterX: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Расстояние между колонками по вертикали
+         */
+        gutterY: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Выравнивание по горизонтали
+         */
+        justify: {
+            type: String,
+            default: ColumnJustifyAlignment.Left
+        },
+        /**
+         *  Выравнивание по вертикали
+         */
+        align: {
+            type: String,
+            default: ColumnAlignment.Top
+        },
+        /**
+         *  Автоматически тянущиеся колонки
+         */
+        stretch: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Перенос колонок
+         */
+        wrap: {
+            type: Boolean,
+            default: true
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

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

@@ -0,0 +1,107 @@
+import { Colors, Sizes } from '@/types';
+import { computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    size: {
+        type: String,
+        default: '500'
+    },
+    backgroundColor: {
+        type: String,
+        default: 'white'
+    }
+});
+const styles = computed(() => {
+    return {
+        '--mc-overlay-color': props.backgroundColor && Colors[props.backgroundColor],
+        '--mc-overlay-spinner-size': props.size && Sizes[props.size]
+    };
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        size: {
+            type: String,
+            default: '500'
+        },
+        backgroundColor: {
+            type: String,
+            default: 'white'
+        }
+    },
+});
+;
+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.section, __VLS_intrinsicElements.section)({ ref: ("overlay"), ...{ class: ("mc-overlay") }, ...{ style: ((__VLS_ctx.styles)) }, });
+    // @ts-ignore navigation for `const overlay = ref()`
+    __VLS_ctx.overlay;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div)({ ...{ class: ("mc-overlay__background") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.section)({ ...{ class: ("mc-overlay__spinner") }, });
+    __VLS_styleScopedClasses['mc-overlay'];
+    __VLS_styleScopedClasses['mc-overlay__background'];
+    __VLS_styleScopedClasses['mc-overlay__spinner'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "overlay": __VLS_nativeElements['section'],
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            styles: styles,
+        };
+    },
+    props: {
+        size: {
+            type: String,
+            default: '500'
+        },
+        backgroundColor: {
+            type: String,
+            default: 'white'
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        size: {
+            type: String,
+            default: '500'
+        },
+        backgroundColor: {
+            type: String,
+            default: 'white'
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */