mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,468 @@
+import DOMPurify from 'isomorphic-dompurify';
+import { Colors } from '@/types/styles/Colors';
+import { LineHeights } from '@/types/styles/LineHeights';
+import { computed, useAttrs } from 'vue';
+import { FontWeights } from '@/types/styles/FontWeights';
+import { adaptiveAdditionalProps, adaptivePropsParams, adaptivePropsSizes } from '@/utils/mcTitleAdaptiveProps';
+import { useHelper } from '@/composables';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const helper = useHelper();
+const attrs = useAttrs();
+const props = defineProps({
+    ...adaptiveAdditionalProps,
+    /**
+     * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
+     */
+    variation: {
+        type: String,
+        default: 'body'
+    },
+    /**
+     * В одну строку с точками в конце, если не вмещается
+     */
+    ellipsis: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Если нужен другой тэг
+     */
+    tagName: {
+        type: String,
+        default: 'div'
+    },
+    /**
+     * Заглавные буквы
+     */
+    uppercase: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Цвет
+     */
+    color: {
+        type: String,
+        default: 'black'
+    },
+    /**
+     *  Позиция текста:
+     *  `left, center, right`
+     */
+    textAlign: {
+        type: String,
+        default: 'left'
+    },
+    /**
+     * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
+     */
+    lineHeight: {
+        type: String,
+        default: ''
+    },
+    /**
+     * Толщина текста:
+     * normal, medium, semi-bold
+     */
+    weight: {
+        type: String,
+        default: ''
+    },
+    /**
+     * Если нужно указать свою
+     * максимальную ширину
+     */
+    maxWidth: {
+        type: String,
+        default: '100%'
+    },
+    preLine: {
+        type: Boolean,
+        default: false
+    },
+    nowrap: {
+        type: Boolean,
+        default: false
+    },
+    plainText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * ** Analog v-html, component use DOMPurify**
+     * */
+    htmlData: {
+        type: String,
+        default: ''
+    }
+});
+const id = computed(() => {
+    return attrs.id;
+});
+const responsivePropsClasses = computed(() => {
+    const result = {};
+    result[`mc-title--variation-${props.variation}`] = !!props.variation;
+    adaptivePropsParams.forEach((value) => {
+        adaptivePropsSizes.forEach((size) => {
+            //@ts-ignore
+            const sizeValue = props[`${value}${helper.upperFirst(size)}`];
+            result[`mc-title--${value}-${size}-${sizeValue}`] = !!sizeValue;
+        });
+    });
+    return result;
+});
+const classes = computed(() => ({
+    'mc-title': true,
+    ['mc-title--ellipsis']: props.ellipsis,
+    [`mc-title--text-align-${props.textAlign}`]: !!props.textAlign,
+    [`mc-title--pre-line`]: props.preLine,
+    [`mc-title--nowrap`]: props.nowrap,
+    'mc-title--uppercase': props.uppercase,
+    'mc-title--line-height': !!props.lineHeight,
+    'mc-title--weight': !!props.weight,
+    'mc-title--plain-text': props.plainText,
+    ...responsivePropsClasses.value
+}));
+const style = computed(() => {
+    let style = {};
+    if (props.color)
+        style['--mc-title-color'] = Colors[props.color];
+    if (props.weight)
+        style['--mc-title-weight'] = FontWeights[props.weight];
+    if (props.lineHeight)
+        style['--mc-title-line-height'] = LineHeights[props.lineHeight];
+    return style;
+});
+const contentStyle = computed(() => ({
+    'max-width': props.maxWidth
+})); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        ...adaptiveAdditionalProps,
+        /**
+         * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
+         */
+        variation: {
+            type: String,
+            default: 'body'
+        },
+        /**
+         * В одну строку с точками в конце, если не вмещается
+         */
+        ellipsis: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Если нужен другой тэг
+         */
+        tagName: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Цвет
+         */
+        color: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Позиция текста:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'left'
+        },
+        /**
+         * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
+         */
+        lineHeight: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Толщина текста:
+         * normal, medium, semi-bold
+         */
+        weight: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Если нужно указать свою
+         * максимальную ширину
+         */
+        maxWidth: {
+            type: String,
+            default: '100%'
+        },
+        preLine: {
+            type: Boolean,
+            default: false
+        },
+        nowrap: {
+            type: Boolean,
+            default: false
+        },
+        plainText: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * ** Analog v-html, component use DOMPurify**
+         * */
+        htmlData: {
+            type: String,
+            default: ''
+        }
+    },
+});
+;
+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.style)) }, id: ((__VLS_ctx.id)), });
+    var __VLS_0 = {};
+    if (props.htmlData) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div)({ ...{ class: ("mc-title__text") }, ...{ style: ((__VLS_ctx.contentStyle)) }, });
+        __VLS_asFunctionalDirective(__VLS_directives.vHtml)(null, { ...__VLS_directiveBindingRestFields, modifiers: {}, value: (__VLS_ctx.DOMPurify.sanitize(props.htmlData)) }, null, null);
+    }
+    else {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-title__text") }, ...{ style: ((__VLS_ctx.contentStyle)) }, });
+        var __VLS_1 = {};
+    }
+    var __VLS_2 = {};
+    __VLS_styleScopedClasses['mc-title__text'];
+    __VLS_styleScopedClasses['mc-title__text'];
+    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 {
+            DOMPurify: DOMPurify,
+            id: id,
+            classes: classes,
+            style: style,
+            contentStyle: contentStyle,
+        };
+    },
+    props: {
+        ...adaptiveAdditionalProps,
+        /**
+         * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
+         */
+        variation: {
+            type: String,
+            default: 'body'
+        },
+        /**
+         * В одну строку с точками в конце, если не вмещается
+         */
+        ellipsis: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Если нужен другой тэг
+         */
+        tagName: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Цвет
+         */
+        color: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Позиция текста:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'left'
+        },
+        /**
+         * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
+         */
+        lineHeight: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Толщина текста:
+         * normal, medium, semi-bold
+         */
+        weight: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Если нужно указать свою
+         * максимальную ширину
+         */
+        maxWidth: {
+            type: String,
+            default: '100%'
+        },
+        preLine: {
+            type: Boolean,
+            default: false
+        },
+        nowrap: {
+            type: Boolean,
+            default: false
+        },
+        plainText: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * ** Analog v-html, component use DOMPurify**
+         * */
+        htmlData: {
+            type: String,
+            default: ''
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        ...adaptiveAdditionalProps,
+        /**
+         * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
+         */
+        variation: {
+            type: String,
+            default: 'body'
+        },
+        /**
+         * В одну строку с точками в конце, если не вмещается
+         */
+        ellipsis: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Если нужен другой тэг
+         */
+        tagName: {
+            type: String,
+            default: 'div'
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Цвет
+         */
+        color: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Позиция текста:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'left'
+        },
+        /**
+         * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
+         */
+        lineHeight: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Толщина текста:
+         * normal, medium, semi-bold
+         */
+        weight: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Если нужно указать свою
+         * максимальную ширину
+         */
+        maxWidth: {
+            type: String,
+            default: '100%'
+        },
+        preLine: {
+            type: Boolean,
+            default: false
+        },
+        nowrap: {
+            type: Boolean,
+            default: false
+        },
+        plainText: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * ** Analog v-html, component use DOMPurify**
+         * */
+        htmlData: {
+            type: String,
+            default: ''
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

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

@@ -0,0 +1,246 @@
+import { Colors } from '@/types/styles/Colors';
+import { useTooltip } from '@/composables/useTooltip';
+import { computed } from 'vue';
+import { TooltipPositions, TooltipSizes } from '@/enums/Tooltip';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const vTooltip = useTooltip();
+const props = defineProps({
+    /**
+     *  Текст подсказки:
+     */
+    content: {
+        type: String,
+        required: true,
+    },
+    /**
+     *  Расположение:
+     */
+    placement: {
+        type: String,
+        default: TooltipPositions.Top,
+    },
+    /**
+     *  Цвет:
+     */
+    color: {
+        type: String,
+        default: Colors.black,
+    },
+    /**
+     *  Цвет текста:
+     */
+    textColor: {
+        type: String,
+        default: Colors.white,
+    },
+    /**
+     * Максимальный размер
+     */
+    size: {
+        type: String,
+        default: TooltipSizes.S,
+    },
+    /**
+     *  Всключить стрелку
+     */
+    arrowVisible: {
+        type: Boolean,
+        default: true,
+    },
+});
+const tooltipProps = computed(() => {
+    return {
+        content: props.content,
+        size: props.size,
+        placement: props.placement,
+        arrow: props.arrowVisible,
+        color: props.color,
+        textColor: props.textColor,
+    };
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Текст подсказки:
+         */
+        content: {
+            type: String,
+            required: true,
+        },
+        /**
+         *  Расположение:
+         */
+        placement: {
+            type: String,
+            default: TooltipPositions.Top,
+        },
+        /**
+         *  Цвет:
+         */
+        color: {
+            type: String,
+            default: Colors.black,
+        },
+        /**
+         *  Цвет текста:
+         */
+        textColor: {
+            type: String,
+            default: Colors.white,
+        },
+        /**
+         * Максимальный размер
+         */
+        size: {
+            type: String,
+            default: TooltipSizes.S,
+        },
+        /**
+         *  Всключить стрелку
+         */
+        arrowVisible: {
+            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-tooltip-target") }, });
+    __VLS_asFunctionalDirective(__VLS_directives.vTooltip)(null, { ...__VLS_directiveBindingRestFields, modifiers: {}, value: (__VLS_ctx.tooltipProps) }, null, null);
+    var __VLS_0 = {};
+    __VLS_styleScopedClasses['mc-tooltip-target'];
+    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 {
+            vTooltip: vTooltip,
+            tooltipProps: tooltipProps,
+        };
+    },
+    props: {
+        /**
+         *  Текст подсказки:
+         */
+        content: {
+            type: String,
+            required: true,
+        },
+        /**
+         *  Расположение:
+         */
+        placement: {
+            type: String,
+            default: TooltipPositions.Top,
+        },
+        /**
+         *  Цвет:
+         */
+        color: {
+            type: String,
+            default: Colors.black,
+        },
+        /**
+         *  Цвет текста:
+         */
+        textColor: {
+            type: String,
+            default: Colors.white,
+        },
+        /**
+         * Максимальный размер
+         */
+        size: {
+            type: String,
+            default: TooltipSizes.S,
+        },
+        /**
+         *  Всключить стрелку
+         */
+        arrowVisible: {
+            type: Boolean,
+            default: true,
+        },
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         *  Текст подсказки:
+         */
+        content: {
+            type: String,
+            required: true,
+        },
+        /**
+         *  Расположение:
+         */
+        placement: {
+            type: String,
+            default: TooltipPositions.Top,
+        },
+        /**
+         *  Цвет:
+         */
+        color: {
+            type: String,
+            default: Colors.black,
+        },
+        /**
+         *  Цвет текста:
+         */
+        textColor: {
+            type: String,
+            default: Colors.white,
+        },
+        /**
+         * Максимальный размер
+         */
+        size: {
+            type: String,
+            default: TooltipSizes.S,
+        },
+        /**
+         *  Всключить стрелку
+         */
+        arrowVisible: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */