mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,547 @@
+import VueSlider from 'vue-3-slider-component';
+import { computed, reactive } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { TitleVariations, Weights } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits(['update:modelValue', 'dragging']);
+const props = defineProps({
+    /**
+     *  Значение
+     */
+    modelValue: {
+        type: [Number, String, Array],
+        required: true
+    },
+    /**
+     *  Мин. значение
+     */
+    min: {
+        type: [String, Number],
+        default: 0
+    },
+    /**
+     *  Макс. значение
+     */
+    max: {
+        type: [String, Number],
+        default: 100
+    },
+    /**
+     *  The interval between two values.
+     */
+    step: {
+        type: [String, Number],
+        default: 1
+    },
+    title: {
+        type: String,
+        default: null
+    },
+    helpText: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Цвет слайдера
+     */
+    color: {
+        type: String,
+        default: 'purple'
+    },
+    /**
+     *  Is it lazy to update the value.
+     *  Useful whenever you need to consume a high-loss operation
+     */
+    lazy: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     *  Whether to disable the component.
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Control Tooltip display.
+     *  'none' | 'always' | 'hover' | 'focus' | 'active'
+     */
+    tooltip: {
+        type: String,
+        default: 'hover'
+    },
+    /**
+     *  The placement of the Tooltip.
+     *  'top' | 'right' | 'bottom' | 'left'
+     */
+    tooltipPlacement: {
+        type: String,
+        default: 'top'
+    },
+    coloredTooltip: {
+        type: Boolean,
+        default: false
+    },
+    smooth: {
+        type: Boolean,
+        default: true
+    },
+    showLabels: {
+        type: Boolean,
+        default: false
+    },
+    errors: {
+        type: Array,
+        default: () => []
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const tooltipFormatter = (value) => {
+    //@ts-ignore
+    if (Number(value) !== value)
+        return value;
+    return ('' + value).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+};
+const computedValue = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        handleInput(value);
+    }
+});
+const classes = computed(() => {
+    return {
+        'mc-range-slider': true,
+        [`mc-range-slider--color-${props.color}`]: !!props.color,
+        'mc-range-slider--colored-tooltip': props.coloredTooltip
+    };
+});
+const styles = computed(() => {
+    return {
+        '--mc-range-slider-color': Colors[props.color]
+    };
+});
+const sliderProps = reactive({
+    style: styles.value,
+    interval: +props.step,
+    min: +props.min,
+    max: +props.max,
+    disabled: props.disabled,
+    lazy: props.lazy,
+    tooltip: props.tooltip,
+    marks: props.showLabels,
+    adsorb: !props.smooth,
+    'tooltip-placement': props.tooltipPlacement,
+    'tooltip-formatter': tooltipFormatter,
+    'dot-size': 20
+});
+const handleInput = (value) => {
+    /**
+     * Событие по изменению значения
+     */
+    emit('update:modelValue', value);
+};
+const handleDrag = (value) => {
+    /**
+     * Событие по изменению значения
+     * (если нужно отслеживать value в ленивом режиме)
+     */
+    emit('dragging', value);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: [Number, String, Array],
+            required: true
+        },
+        /**
+         *  Мин. значение
+         */
+        min: {
+            type: [String, Number],
+            default: 0
+        },
+        /**
+         *  Макс. значение
+         */
+        max: {
+            type: [String, Number],
+            default: 100
+        },
+        /**
+         *  The interval between two values.
+         */
+        step: {
+            type: [String, Number],
+            default: 1
+        },
+        title: {
+            type: String,
+            default: null
+        },
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Цвет слайдера
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Is it lazy to update the value.
+         *  Useful whenever you need to consume a high-loss operation
+         */
+        lazy: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Whether to disable the component.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Control Tooltip display.
+         *  'none' | 'always' | 'hover' | 'focus' | 'active'
+         */
+        tooltip: {
+            type: String,
+            default: 'hover'
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        tooltipPlacement: {
+            type: String,
+            default: 'top'
+        },
+        coloredTooltip: {
+            type: Boolean,
+            default: false
+        },
+        smooth: {
+            type: Boolean,
+            default: true
+        },
+        showLabels: {
+            type: Boolean,
+            default: false
+        },
+        errors: {
+            type: Array,
+            default: () => []
+        }
+    },
+    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: ((__VLS_ctx.classes)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-range__header") }, });
+    var __VLS_0 = {};
+    if (props.title) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({ weight: ((__VLS_ctx.Weights.Medium)), }));
+        const __VLS_2 = __VLS_1({ weight: ((__VLS_ctx.Weights.Medium)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        (props.title);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        var __VLS_5;
+    }
+    const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.VueSlider;
+    /** @type { [typeof __VLS_components.VueSlider, typeof __VLS_components.vueSlider, ] } */
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ 'onChange': {} }, ...{ 'onDragging': {} }, modelValue: ((__VLS_ctx.computedValue)), ...(__VLS_ctx.sliderProps), }));
+    const __VLS_8 = __VLS_7({ ...{ 'onChange': {} }, ...{ 'onDragging': {} }, modelValue: ((__VLS_ctx.computedValue)), ...(__VLS_ctx.sliderProps), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    let __VLS_12;
+    const __VLS_13 = {
+        onChange: (__VLS_ctx.handleInput)
+    };
+    const __VLS_14 = {
+        onDragging: (__VLS_ctx.handleDrag)
+    };
+    let __VLS_9;
+    let __VLS_10;
+    var __VLS_11;
+    if ((__VLS_ctx.fieldErrors.errorText.value || props.helpText || __VLS_ctx.$slots.footer) && props.showLabels) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+    }
+    if (__VLS_ctx.fieldErrors.errorText.value || props.helpText || __VLS_ctx.$slots.footer) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-range__footer") }, });
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            // @ts-ignore
+            [McTitle,];
+            // @ts-ignore
+            const __VLS_15 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), ...{ class: ("mc-field-range__error-text") }, htmlData: ((__VLS_ctx.fieldErrors.errorText.value)), }));
+            const __VLS_16 = __VLS_15({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), ...{ class: ("mc-field-range__error-text") }, htmlData: ((__VLS_ctx.fieldErrors.errorText.value)), }, ...__VLS_functionalComponentArgsRest(__VLS_15));
+            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+        }
+        var __VLS_20 = {};
+        if (props.helpText) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_21 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
+            const __VLS_22 = __VLS_21({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_21));
+            (__VLS_ctx.helpText);
+            __VLS_nonNullable(__VLS_25.slots).default;
+            var __VLS_25;
+        }
+    }
+    __VLS_styleScopedClasses['mc-field-range__header'];
+    __VLS_styleScopedClasses['mc-field-range__footer'];
+    __VLS_styleScopedClasses['mc-field-range__error-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 {
+            VueSlider: VueSlider,
+            McTitle: McTitle,
+            TitleVariations: TitleVariations,
+            Weights: Weights,
+            fieldErrors: fieldErrors,
+            computedValue: computedValue,
+            classes: classes,
+            sliderProps: sliderProps,
+            handleInput: handleInput,
+            handleDrag: handleDrag,
+        };
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: [Number, String, Array],
+            required: true
+        },
+        /**
+         *  Мин. значение
+         */
+        min: {
+            type: [String, Number],
+            default: 0
+        },
+        /**
+         *  Макс. значение
+         */
+        max: {
+            type: [String, Number],
+            default: 100
+        },
+        /**
+         *  The interval between two values.
+         */
+        step: {
+            type: [String, Number],
+            default: 1
+        },
+        title: {
+            type: String,
+            default: null
+        },
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Цвет слайдера
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Is it lazy to update the value.
+         *  Useful whenever you need to consume a high-loss operation
+         */
+        lazy: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Whether to disable the component.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Control Tooltip display.
+         *  'none' | 'always' | 'hover' | 'focus' | 'active'
+         */
+        tooltip: {
+            type: String,
+            default: 'hover'
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        tooltipPlacement: {
+            type: String,
+            default: 'top'
+        },
+        coloredTooltip: {
+            type: Boolean,
+            default: false
+        },
+        smooth: {
+            type: Boolean,
+            default: true
+        },
+        showLabels: {
+            type: Boolean,
+            default: false
+        },
+        errors: {
+            type: Array,
+            default: () => []
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            type: [Number, String, Array],
+            required: true
+        },
+        /**
+         *  Мин. значение
+         */
+        min: {
+            type: [String, Number],
+            default: 0
+        },
+        /**
+         *  Макс. значение
+         */
+        max: {
+            type: [String, Number],
+            default: 100
+        },
+        /**
+         *  The interval between two values.
+         */
+        step: {
+            type: [String, Number],
+            default: 1
+        },
+        title: {
+            type: String,
+            default: null
+        },
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Цвет слайдера
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Is it lazy to update the value.
+         *  Useful whenever you need to consume a high-loss operation
+         */
+        lazy: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Whether to disable the component.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Control Tooltip display.
+         *  'none' | 'always' | 'hover' | 'focus' | 'active'
+         */
+        tooltip: {
+            type: String,
+            default: 'hover'
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        tooltipPlacement: {
+            type: String,
+            default: 'top'
+        },
+        coloredTooltip: {
+            type: Boolean,
+            default: false
+        },
+        smooth: {
+            type: Boolean,
+            default: true
+        },
+        showLabels: {
+            type: Boolean,
+            default: false
+        },
+        errors: {
+            type: Array,
+            default: () => []
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */