mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,408 @@
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { Colors } from '@/types/styles/Colors';
+import { computed } from 'vue';
+import { TitleVariations } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    /**
+     *  Значение
+     *
+     */
+    modelValue: {
+        type: [Boolean, String, Number],
+        default: null
+    },
+    /**
+     *  Выбранное значение
+     */
+    checkedValue: {
+        type: [Boolean, String, Number],
+        default: true
+    },
+    /**
+     *  Невыбранное значение
+     */
+    uncheckedValue: {
+        type: [Boolean, String, Number],
+        default: false
+    },
+    /**
+     *  Изменение цвета текста
+     *  при переключении
+     */
+    coloredText: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Отключенное состояние
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Позиция текста
+     *  относительно переключателя
+     */
+    textPosition: {
+        type: String,
+        default: 'left'
+    },
+    /**
+     * Активный цвет
+     */
+    color: {
+        type: String,
+        default: 'purple'
+    },
+    /**
+     *  Ошибки
+     *
+     */
+    errors: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     * Атрибут tabindex для главного элемента
+     */
+    tabindex: {
+        type: [String, Number]
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const _value = computed(() => {
+    return props.modelValue === props.checkedValue;
+});
+const classes = computed(() => {
+    return {
+        'mc-field-toggle': true,
+        'mc-field-toggle--checked': _value.value,
+        'mc-field-toggle--disabled': props.disabled,
+        'mc-field-toggle--colored-text': props.coloredText,
+        [`mc-field-toggle--text-position-${props.textPosition}`]: !!props.textPosition
+    };
+});
+const styles = computed(() => {
+    let disabledColor;
+    let saturateValue = 'initial';
+    switch (props.color) {
+        case 'purple': {
+            disabledColor = 'light-purple';
+            break;
+        }
+        default: {
+            disabledColor = props.color;
+            saturateValue = '50%';
+        }
+    }
+    return {
+        '--mc-field-toggle-color': props.color && Colors[props.color],
+        '--mc-field-toggle-disabled-color': disabledColor && Colors[disabledColor],
+        '--mc-field-toggle-saturate-value': saturateValue
+    };
+});
+const inputProps = computed(() => {
+    return {
+        checked: _value.value,
+        disabled: props.disabled,
+        tabindex: props.tabindex,
+        class: 'mc-field-toggle__field',
+        type: 'checkbox'
+    };
+});
+const change = (e) => {
+    const target = e.target;
+    const checked = target.checked;
+    fieldErrors.toggleErrorVisible();
+    /**
+     * Событие тоггла
+     */
+    emit('update:modelValue', checked ? props.checkedValue : props.uncheckedValue);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Значение
+         *
+         */
+        modelValue: {
+            type: [Boolean, String, Number],
+            default: null
+        },
+        /**
+         *  Выбранное значение
+         */
+        checkedValue: {
+            type: [Boolean, String, Number],
+            default: true
+        },
+        /**
+         *  Невыбранное значение
+         */
+        uncheckedValue: {
+            type: [Boolean, String, Number],
+            default: false
+        },
+        /**
+         *  Изменение цвета текста
+         *  при переключении
+         */
+        coloredText: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Отключенное состояние
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Позиция текста
+         *  относительно переключателя
+         */
+        textPosition: {
+            type: String,
+            default: 'left'
+        },
+        /**
+         * Активный цвет
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         */
+        tabindex: {
+            type: [String, Number]
+        }
+    },
+    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;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-toggle__content") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-field-toggle__text") }, });
+    var __VLS_0 = {};
+    __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-field-toggle__wrapper") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.input)({ ...{ onInput: (__VLS_ctx.change) }, ...(__VLS_ctx.inputProps), });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-field-toggle__slider") }, });
+    if (__VLS_ctx.fieldErrors.errorText.value) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }));
+        const __VLS_2 = __VLS_1({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        (__VLS_ctx.fieldErrors.errorText.value);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        var __VLS_5;
+    }
+    __VLS_styleScopedClasses['mc-field-toggle__content'];
+    __VLS_styleScopedClasses['mc-field-toggle__text'];
+    __VLS_styleScopedClasses['mc-field-toggle__wrapper'];
+    __VLS_styleScopedClasses['mc-field-toggle__slider'];
+    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 {
+            McTitle: McTitle,
+            TitleVariations: TitleVariations,
+            fieldErrors: fieldErrors,
+            classes: classes,
+            styles: styles,
+            inputProps: inputProps,
+            change: change,
+        };
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         *
+         */
+        modelValue: {
+            type: [Boolean, String, Number],
+            default: null
+        },
+        /**
+         *  Выбранное значение
+         */
+        checkedValue: {
+            type: [Boolean, String, Number],
+            default: true
+        },
+        /**
+         *  Невыбранное значение
+         */
+        uncheckedValue: {
+            type: [Boolean, String, Number],
+            default: false
+        },
+        /**
+         *  Изменение цвета текста
+         *  при переключении
+         */
+        coloredText: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Отключенное состояние
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Позиция текста
+         *  относительно переключателя
+         */
+        textPosition: {
+            type: String,
+            default: 'left'
+        },
+        /**
+         * Активный цвет
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         */
+        tabindex: {
+            type: [String, Number]
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         *
+         */
+        modelValue: {
+            type: [Boolean, String, Number],
+            default: null
+        },
+        /**
+         *  Выбранное значение
+         */
+        checkedValue: {
+            type: [Boolean, String, Number],
+            default: true
+        },
+        /**
+         *  Невыбранное значение
+         */
+        uncheckedValue: {
+            type: [Boolean, String, Number],
+            default: false
+        },
+        /**
+         *  Изменение цвета текста
+         *  при переключении
+         */
+        coloredText: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Отключенное состояние
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Позиция текста
+         *  относительно переключателя
+         */
+        textPosition: {
+            type: String,
+            default: 'left'
+        },
+        /**
+         * Активный цвет
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         */
+        tabindex: {
+            type: [String, Number]
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

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

@@ -0,0 +1,192 @@
+import { onMounted, watch, ref, onBeforeUnmount } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits(['loading', 'hide']);
+const props = defineProps({
+    /**
+     * За какое расстояние(px) инициировать loading event
+     * **/
+    overlap: {
+        type: Number,
+        default: 100,
+    },
+    /**
+     * Активен ли триггер
+     * */
+    active: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Компонент в котором происходит скролл, указывается для большей точности
+     * Дефолтно используется область видимости браузера для отслеживания появления компопнента
+     * **/
+    root: {
+        type: String,
+        default: null,
+    },
+});
+const observer = ref();
+const el = ref();
+const id = ref(`indicator_${Date.now()}`);
+onMounted(() => {
+    setObserver();
+});
+onBeforeUnmount(() => {
+    clearAllListeners();
+});
+const setObserver = () => {
+    el.value = document.getElementById(id.value);
+    // создаем IntersectionObserver - смотрит за тем когда элемент попадает во viewport
+    observer.value = new IntersectionObserver(([entry]) => {
+        // если попадает во viewport делаем $emit
+        if ((entry.intersectionRatio === 1 || entry.isIntersecting) && props.active) {
+            return emit('loading');
+        }
+        else {
+            return emit('hide');
+        }
+    }, {
+        ...(props.root ? { root: el.value?.closest(props.root) } : {}),
+        rootMargin: `${props.overlap}px`,
+        threshold: 0.1,
+    });
+    // назначаем слушателя на observer
+    el.value && observer.value.observe(el.value);
+};
+const clearAllListeners = () => {
+    observer.value && observer.value.disconnect();
+    observer.value = null;
+};
+watch(() => props.active, (value) => {
+    clearAllListeners();
+    if (value) {
+        setObserver();
+    }
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * За какое расстояние(px) инициировать loading event
+         * **/
+        overlap: {
+            type: Number,
+            default: 100,
+        },
+        /**
+         * Активен ли триггер
+         * */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Компонент в котором происходит скролл, указывается для большей точности
+         * Дефолтно используется область видимости браузера для отслеживания появления компопнента
+         * **/
+        root: {
+            type: String,
+            default: null,
+        },
+    },
+    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;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.section, __VLS_intrinsicElements.section)({ ...{ class: ("el-infinity-loading__wrapper") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ id: ((__VLS_ctx.id)), ...{ class: ("el-infinity-loading") }, });
+    __VLS_styleScopedClasses['el-infinity-loading__wrapper'];
+    __VLS_styleScopedClasses['el-infinity-loading'];
+    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 {
+            id: id,
+        };
+    },
+    emits: {},
+    props: {
+        /**
+         * За какое расстояние(px) инициировать loading event
+         * **/
+        overlap: {
+            type: Number,
+            default: 100,
+        },
+        /**
+         * Активен ли триггер
+         * */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Компонент в котором происходит скролл, указывается для большей точности
+         * Дефолтно используется область видимости браузера для отслеживания появления компопнента
+         * **/
+        root: {
+            type: String,
+            default: null,
+        },
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        /**
+         * За какое расстояние(px) инициировать loading event
+         * **/
+        overlap: {
+            type: Number,
+            default: 100,
+        },
+        /**
+         * Активен ли триггер
+         * */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Компонент в котором происходит скролл, указывается для большей точности
+         * Дефолтно используется область видимости браузера для отслеживания появления компопнента
+         * **/
+        root: {
+            type: String,
+            default: null,
+        },
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */