mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,1255 @@
+import { computed, onMounted, reactive, ref, useAttrs, watch } from 'vue';
+import { DatepickerFormat, DatepickerTypes, DayjsFormat, DatepickerOutputFormat, DatepickerFormatsVariations } from '@/enums/Datepicker';
+//@ts-ignore
+import { dayjs, dayjsLocales } from '../../../utils/dayjs.js';
+import DatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import McTitle from '../McTitle/McTitle.vue';
+import McSvgIcon from '../McSvgIcon/McSvgIcon.vue';
+import McButton from '../McButton/McButton.vue';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { ButtonSize, TitleVariations, Weights } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const attrs = useAttrs();
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    //@ts-ignore
+    modelValue: {
+        type: [String, Array]
+    },
+    /**
+     *  Тип датапикера
+     */
+    type: {
+        type: String,
+        default: DatepickerTypes.DatePicker
+    },
+    /**
+     *  Заголовок поля:
+     */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Вспомогательный текст под инпутом:
+     */
+    helpText: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Редактируемый инпут
+     */
+    editable: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    placeholder: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Name
+     */
+    name: {
+        type: String,
+        required: true
+    },
+    /**
+     *  Локаль The locale code (ISO 639-1 + optional country code)
+     */
+    lang: {
+        type: String,
+        default: 'en'
+    },
+    /**
+     *  Ошибки
+     */
+    errors: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Отдаваемая дата будет в формате ISO String
+     */
+    toIsoFormat: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Формат отдаваемой даты
+     */
+    placeholders: {
+        type: Object,
+        default: () => ({
+            week: 'Week',
+            month: 'Month',
+            quarter: 'Quarter',
+            year: 'Year',
+            confirm: 'Confirm'
+        })
+    },
+    /**
+     * Пресеты для быстрых периодов
+     **/
+    customPresets: {
+        type: Array,
+        default: () => []
+    },
+    range: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Если значение true, то датапикер отображается в открытом виде
+     */
+    inline: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Дата, до которой все будет задизэйблено
+     **/
+    minDate: {
+        type: [Date, String]
+    },
+    /**
+     * Дата, после которой все будет задизэйблено
+     **/
+    maxDate: {
+        type: [String, Date]
+    },
+    /**
+     * Массив дат запрещенных к выбору / Метод которые проверяет каждую дату
+     **/
+    disabledDates: {
+        type: [Array, Function]
+    },
+    /**
+     * Массив дат разрешенных к выбору / Метод которые проверяет каждую дату
+     * **/
+    allowedDates: {
+        type: [Array, Function]
+    },
+    /**
+     * Функция проверяющая и устанавливающая доступно ли время для выбора
+     * Params [String] date - текущая дата
+     * return Boolean, где true - время заблокировано для выбора
+     * **/
+    disabledTime: {
+        type: [Array, Function]
+    },
+    minWidth: {
+        type: String,
+        default: '240px'
+    },
+    hours: {
+        type: Array,
+        default: () => []
+    },
+    minutes: {
+        type: Array,
+        default: () => []
+    },
+    seconds: {
+        type: Array,
+        default: () => []
+    },
+    timezone: {
+        type: String,
+        default: dayjs.tz.guess()
+    },
+    useTimezone: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Показывать ли крестик очищения поля
+     * */
+    clearable: {
+        type: Boolean,
+        default: true
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    setDefaultToday: {
+        type: Boolean,
+        default: true
+    },
+    markers: {
+        type: Array,
+        default: () => []
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const pickDate = ref(null);
+const input = ref(null);
+const classes = computed(() => {
+    return {
+        'mc-date-picker--error': !!fieldErrors.errorText.value,
+        'mc-date-picker--disabled': props.disabled
+    };
+});
+const formats = reactive({
+    [DatepickerTypes.TimePicker]: {
+        [DatepickerFormatsVariations.Picker]: DatepickerFormat.TimePicker,
+        [DatepickerFormatsVariations.Dayjs]: DayjsFormat.TimePicker,
+        [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.TimePicker
+    },
+    [DatepickerTypes.DatePicker]: {
+        [DatepickerFormatsVariations.Picker]: DatepickerFormat.DatePicker,
+        [DatepickerFormatsVariations.Dayjs]: DayjsFormat.DatePicker,
+        [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.DatePicker
+    },
+    [DatepickerTypes.DateTimePicker]: {
+        [DatepickerFormatsVariations.Picker]: DatepickerFormat.DateTimePicker,
+        [DatepickerFormatsVariations.Dayjs]: DayjsFormat.DateTimePicker,
+        [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.DateTimePicker
+    },
+    [DatepickerTypes.WeekPicker]: {
+        [DatepickerFormatsVariations.Picker]: DatepickerFormat.WeekPicker,
+        [DatepickerFormatsVariations.Dayjs]: DayjsFormat.WeekPicker,
+        [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.WeekPicker
+    },
+    [DatepickerTypes.MonthPicker]: {
+        [DatepickerFormatsVariations.Picker]: DatepickerFormat.MonthPicker,
+        [DatepickerFormatsVariations.Dayjs]: DayjsFormat.MonthPicker,
+        [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.MonthPicker
+    },
+    [DatepickerTypes.YearPicker]: {
+        [DatepickerFormatsVariations.Picker]: DatepickerFormat.YearPicker,
+        [DatepickerFormatsVariations.Dayjs]: DayjsFormat.YearPicker,
+        [DatepickerFormatsVariations.Output]: DatepickerOutputFormat.YearPicker
+    }
+});
+const computedType = computed(() => {
+    return props.type || DatepickerTypes.DatePicker;
+});
+const dateFormat = reactive(formats[computedType.value]);
+const isTimePicker = computed(() => {
+    return computedType.value === DatepickerTypes.TimePicker;
+});
+const isDateTimePicker = computed(() => {
+    return computedType.value === DatepickerTypes.DateTimePicker;
+});
+const isWeekPicker = computed(() => {
+    return computedType.value === DatepickerTypes.WeekPicker;
+});
+const isMonthPicker = computed(() => {
+    return computedType.value === DatepickerTypes.MonthPicker;
+});
+const isYearPicker = computed(() => {
+    return computedType.value === DatepickerTypes.YearPicker;
+});
+const pickerType = computed(() => {
+    return {
+        [DatepickerTypes.TimePicker]: computedType.value === DatepickerTypes.TimePicker,
+        [DatepickerTypes.WeekPicker]: computedType.value === DatepickerTypes.WeekPicker,
+        [DatepickerTypes.MonthPicker]: computedType.value === DatepickerTypes.MonthPicker,
+        [DatepickerTypes.YearPicker]: computedType.value === DatepickerTypes.YearPicker
+    };
+});
+const isAutoApply = computed(() => {
+    return !isTimePicker.value && !isDateTimePicker.value && !isFooterVisible.value;
+});
+const weekNumbers = computed(() => {
+    return isWeekPicker.value ? 'local' : null;
+});
+const modelType = computed(() => {
+    return props.toIsoFormat && !props.useTimezone ? 'iso' : 'format';
+});
+const hoursOptions = computed(() => {
+    return props.hours && props.hours.length ? { 'hour-options': props.hours } : {};
+});
+const minutesOptions = computed(() => {
+    return props.minutes && props.minutes.length ? { 'minute-options': props.minutes } : {};
+});
+const secondsOptions = computed(() => {
+    return props.seconds && props.seconds.length ? { 'second-options': props.seconds } : {};
+});
+const isFooterVisible = computed(() => {
+    return (props.range &&
+        (props.customPresets?.length || !!props.placeholders) &&
+        !isTimePicker.value &&
+        !isYearPicker.value &&
+        !isMonthPicker.value);
+});
+const localValue = computed({
+    get() {
+        return getFormattedPickerDate(props.modelValue);
+    },
+    set(value) {
+        if (!value)
+            value = props.range ? [] : null;
+        const date = getFormattedOutputDate(value);
+        fieldErrors.toggleErrorVisible();
+        emit('update:modelValue', date);
+    }
+});
+onMounted(() => {
+    init();
+});
+const init = () => {
+    props.setDefaultToday && handlePreselectToday();
+};
+const handlerPreselectRange = (period) => {
+    const [start, end] = period;
+    input.value && (input.value.currentValue = dayjs ? [dayjs(start).toDate(), dayjs(end).toDate()] : period);
+};
+/**
+ * Преселект при setDefaultToday = true
+ * */
+const handlePreselectToday = () => {
+    if (isWeekPicker.value)
+        return;
+    const hasValue = props.range
+        ? localValue.value?.length && Array.isArray(localValue.value) && localValue.value.every((v) => dayjs(v).isValid())
+        : //@ts-ignore
+            dayjs(localValue.value).isValid();
+    if (!hasValue) {
+        let today = props.toIsoFormat
+            ? dayjs().toISOString()
+            : dayjs().format(dateFormat[DatepickerFormatsVariations.Output]);
+        localValue.value = props.range ? getFormattedPickerDate([today, today]) : getFormattedPickerDate(today);
+    }
+};
+/**
+ * Prepare dates for datepicker
+ * */
+const getFormattedPickerDate = (value) => {
+    if (isWeekPicker.value)
+        return value;
+    let preparedValue = props.range ? (Array.isArray(value) ? value : []) : [value];
+    if (!props.toIsoFormat) {
+        preparedValue = preparedValue.map((pv) => dayjs(pv, dateFormat.output).format(dateFormat.dayjs));
+    }
+    const [start, end] = preparedValue;
+    return props.range ? [start, end].filter(Boolean) : start;
+};
+/**
+ * Prepare dates for output
+ * */
+const getFormattedOutputDate = (value) => {
+    if (isWeekPicker.value)
+        return value;
+    let preparedValue = props.range ? (Array.isArray(value) ? value.map((pv) => String(pv)) : []) : [String(value)];
+    if (!props.toIsoFormat) {
+        preparedValue = preparedValue.map((pv) => dayjs(pv, dateFormat.dayjs).format(dateFormat.output));
+    }
+    const [start, end] = preparedValue.map((pv) => (pv === 'Invalid Date' ? null : pv));
+    return props.range ? [start, end].filter(Boolean) : start;
+};
+const setLocale = async () => {
+    const locale = props.lang !== 'ar' && Object.keys(dayjsLocales).includes(props.lang) ? props.lang : 'en';
+    //@ts-ignore
+    await dayjsLocales[locale]?.();
+    dayjs.locale(locale);
+};
+const selectPeriod = (key) => {
+    let start = dayjs();
+    //@ts-ignore
+    const end = pickDate.value ? dayjs(pickDate.value) : dayjs();
+    switch (key) {
+        case 'week':
+            start = dayjs(end).subtract(7, 'days');
+            break;
+        case 'month':
+            start = dayjs(end).subtract(1, 'months');
+            break;
+        case 'quarter':
+            start = dayjs(end).subtract(3, 'months');
+            break;
+        case 'year':
+            start = dayjs(end).subtract(1, 'years');
+            break;
+    }
+    input.value.updateInternalModelValue([start.toDate(), end.toDate()]);
+};
+const handlePickDate = (date) => {
+    pickDate.value = date;
+};
+const handleSubmit = () => {
+    input.value.selectDate();
+    input.value.closeMenu();
+};
+watch(() => props.lang, () => {
+    setLocale();
+}, { immediate: true }); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        //@ts-ignore
+        modelValue: {
+            type: [String, Array]
+        },
+        /**
+         *  Тип датапикера
+         */
+        type: {
+            type: String,
+            default: DatepickerTypes.DatePicker
+        },
+        /**
+         *  Заголовок поля:
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Редактируемый инпут
+         */
+        editable: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Локаль The locale code (ISO 639-1 + optional country code)
+         */
+        lang: {
+            type: String,
+            default: 'en'
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Отдаваемая дата будет в формате ISO String
+         */
+        toIsoFormat: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Формат отдаваемой даты
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({
+                week: 'Week',
+                month: 'Month',
+                quarter: 'Quarter',
+                year: 'Year',
+                confirm: 'Confirm'
+            })
+        },
+        /**
+         * Пресеты для быстрых периодов
+         **/
+        customPresets: {
+            type: Array,
+            default: () => []
+        },
+        range: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Если значение true, то датапикер отображается в открытом виде
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Дата, до которой все будет задизэйблено
+         **/
+        minDate: {
+            type: [Date, String]
+        },
+        /**
+         * Дата, после которой все будет задизэйблено
+         **/
+        maxDate: {
+            type: [String, Date]
+        },
+        /**
+         * Массив дат запрещенных к выбору / Метод которые проверяет каждую дату
+         **/
+        disabledDates: {
+            type: [Array, Function]
+        },
+        /**
+         * Массив дат разрешенных к выбору / Метод которые проверяет каждую дату
+         * **/
+        allowedDates: {
+            type: [Array, Function]
+        },
+        /**
+         * Функция проверяющая и устанавливающая доступно ли время для выбора
+         * Params [String] date - текущая дата
+         * return Boolean, где true - время заблокировано для выбора
+         * **/
+        disabledTime: {
+            type: [Array, Function]
+        },
+        minWidth: {
+            type: String,
+            default: '240px'
+        },
+        hours: {
+            type: Array,
+            default: () => []
+        },
+        minutes: {
+            type: Array,
+            default: () => []
+        },
+        seconds: {
+            type: Array,
+            default: () => []
+        },
+        timezone: {
+            type: String,
+            default: dayjs.tz.guess()
+        },
+        useTimezone: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Показывать ли крестик очищения поля
+         * */
+        clearable: {
+            type: Boolean,
+            default: true
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        setDefaultToday: {
+            type: Boolean,
+            default: true
+        },
+        markers: {
+            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)({ ref: ("field"), ...{ class: ("mc-date-picker") }, ...{ class: ((__VLS_ctx.classes)) }, });
+    // @ts-ignore navigation for `const field = ref()`
+    __VLS_ctx.field;
+    if (__VLS_ctx.$slots.header || !!props.title) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ for: ((__VLS_ctx.name)), ...{ class: ("mc-date-picker__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;
+        }
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-date-picker__inner") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-date-picker__input-wrapper") }, ...{ style: (({ minWidth: __VLS_ctx.minWidth })) }, });
+    const __VLS_6 = __VLS_resolvedLocalAndGlobalComponents.DatePicker;
+    /** @type { [typeof __VLS_components.DatePicker, typeof __VLS_components.datePicker, typeof __VLS_components.DatePicker, typeof __VLS_components.datePicker, ] } */
+    // @ts-ignore
+    const __VLS_7 = __VLS_asFunctionalComponent(__VLS_6, new __VLS_6({ ...{ 'onRangeStart': {} }, modelValue: ((__VLS_ctx.localValue)), ref: ("input"), type: ((__VLS_ctx.type)), ...({
+            ...__VLS_ctx.attrs,
+            ...__VLS_ctx.pickerType,
+            ...__VLS_ctx.hoursOptions,
+            ...__VLS_ctx.minutesOptions,
+            ...__VLS_ctx.secondsOptions
+        }), ...{ class: ("mc-date-picker__date-picker") }, range: ((props.range)), multiCalendars: ((props.range)), monthChangeOnScroll: ((false)), timezone: ((__VLS_ctx.timezone)), format: ((__VLS_ctx.dateFormat.picker)), modelType: ((__VLS_ctx.modelType)), autoApply: ((__VLS_ctx.isAutoApply)), partialFlow: ((__VLS_ctx.isTimePicker || __VLS_ctx.isDateTimePicker)), enableTimePicker: ((__VLS_ctx.isTimePicker || __VLS_ctx.isDateTimePicker)), clearable: ((__VLS_ctx.clearable)), inline: ((__VLS_ctx.inline)), locale: ((__VLS_ctx.lang)), markers: ((__VLS_ctx.markers)), actionRow: (({})), loading: ((__VLS_ctx.loading)), weekNumbers: ((__VLS_ctx.weekNumbers)), placeholder: ((__VLS_ctx.placeholder)), editable: ((__VLS_ctx.editable)), disabled: ((__VLS_ctx.disabled)), disabledDates: ((__VLS_ctx.disabledDates)), allowedDates: ((__VLS_ctx.allowedDates)), minDate: ((__VLS_ctx.minDate)), maxDate: ((__VLS_ctx.maxDate)), disabledTimes: ((__VLS_ctx.disabledTime)), }));
+    const __VLS_8 = __VLS_7({ ...{ 'onRangeStart': {} }, modelValue: ((__VLS_ctx.localValue)), ref: ("input"), type: ((__VLS_ctx.type)), ...({
+            ...__VLS_ctx.attrs,
+            ...__VLS_ctx.pickerType,
+            ...__VLS_ctx.hoursOptions,
+            ...__VLS_ctx.minutesOptions,
+            ...__VLS_ctx.secondsOptions
+        }), ...{ class: ("mc-date-picker__date-picker") }, range: ((props.range)), multiCalendars: ((props.range)), monthChangeOnScroll: ((false)), timezone: ((__VLS_ctx.timezone)), format: ((__VLS_ctx.dateFormat.picker)), modelType: ((__VLS_ctx.modelType)), autoApply: ((__VLS_ctx.isAutoApply)), partialFlow: ((__VLS_ctx.isTimePicker || __VLS_ctx.isDateTimePicker)), enableTimePicker: ((__VLS_ctx.isTimePicker || __VLS_ctx.isDateTimePicker)), clearable: ((__VLS_ctx.clearable)), inline: ((__VLS_ctx.inline)), locale: ((__VLS_ctx.lang)), markers: ((__VLS_ctx.markers)), actionRow: (({})), loading: ((__VLS_ctx.loading)), weekNumbers: ((__VLS_ctx.weekNumbers)), placeholder: ((__VLS_ctx.placeholder)), editable: ((__VLS_ctx.editable)), disabled: ((__VLS_ctx.disabled)), disabledDates: ((__VLS_ctx.disabledDates)), allowedDates: ((__VLS_ctx.allowedDates)), minDate: ((__VLS_ctx.minDate)), maxDate: ((__VLS_ctx.maxDate)), disabledTimes: ((__VLS_ctx.disabledTime)), }, ...__VLS_functionalComponentArgsRest(__VLS_7));
+    // @ts-ignore navigation for `const input = ref()`
+    __VLS_ctx.input;
+    var __VLS_12 = {};
+    let __VLS_13;
+    const __VLS_14 = {
+        onRangeStart: (__VLS_ctx.handlePickDate)
+    };
+    let __VLS_9;
+    let __VLS_10;
+    if (__VLS_ctx.isFooterVisible) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { "action-row": __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-datepicker__footer-popup") }, });
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-datepicker__footer-popup-periods") }, });
+            if (__VLS_ctx.customPresets && __VLS_ctx.customPresets.length) {
+                for (const [preset] of __VLS_getVForSourceType((__VLS_ctx.customPresets))) {
+                    // @ts-ignore
+                    [McButton, McButton,];
+                    // @ts-ignore
+                    const __VLS_15 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, key: ((preset.title)), variation: ("black-link"), secondaryColor: ("purple"), }));
+                    const __VLS_16 = __VLS_15({ ...{ 'onClick': {} }, key: ((preset.title)), variation: ("black-link"), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_15));
+                    let __VLS_20;
+                    const __VLS_21 = {
+                        onClick: (...[$event]) => {
+                            if (!((__VLS_ctx.isFooterVisible)))
+                                return;
+                            if (!((__VLS_ctx.customPresets && __VLS_ctx.customPresets.length)))
+                                return;
+                            __VLS_ctx.handlerPreselectRange(preset.period);
+                        }
+                    };
+                    let __VLS_17;
+                    let __VLS_18;
+                    (preset.title);
+                    __VLS_nonNullable(__VLS_19.slots).default;
+                    var __VLS_19;
+                }
+            }
+            else {
+                if (__VLS_ctx.placeholders.week) {
+                    // @ts-ignore
+                    [McButton, McButton,];
+                    // @ts-ignore
+                    const __VLS_22 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }));
+                    const __VLS_23 = __VLS_22({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_22));
+                    let __VLS_27;
+                    const __VLS_28 = {
+                        onClick: (...[$event]) => {
+                            if (!((__VLS_ctx.isFooterVisible)))
+                                return;
+                            if (!(!((__VLS_ctx.customPresets && __VLS_ctx.customPresets.length))))
+                                return;
+                            if (!((__VLS_ctx.placeholders.week)))
+                                return;
+                            __VLS_ctx.selectPeriod('week');
+                        }
+                    };
+                    let __VLS_24;
+                    let __VLS_25;
+                    (__VLS_ctx.placeholders.week);
+                    __VLS_nonNullable(__VLS_26.slots).default;
+                    var __VLS_26;
+                }
+                if (__VLS_ctx.placeholders.month) {
+                    // @ts-ignore
+                    [McButton, McButton,];
+                    // @ts-ignore
+                    const __VLS_29 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }));
+                    const __VLS_30 = __VLS_29({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_29));
+                    let __VLS_34;
+                    const __VLS_35 = {
+                        onClick: (...[$event]) => {
+                            if (!((__VLS_ctx.isFooterVisible)))
+                                return;
+                            if (!(!((__VLS_ctx.customPresets && __VLS_ctx.customPresets.length))))
+                                return;
+                            if (!((__VLS_ctx.placeholders.month)))
+                                return;
+                            __VLS_ctx.selectPeriod('month');
+                        }
+                    };
+                    let __VLS_31;
+                    let __VLS_32;
+                    (__VLS_ctx.placeholders.month);
+                    __VLS_nonNullable(__VLS_33.slots).default;
+                    var __VLS_33;
+                }
+                if (__VLS_ctx.placeholders.quarter) {
+                    // @ts-ignore
+                    [McButton, McButton,];
+                    // @ts-ignore
+                    const __VLS_36 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }));
+                    const __VLS_37 = __VLS_36({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_36));
+                    let __VLS_41;
+                    const __VLS_42 = {
+                        onClick: (...[$event]) => {
+                            if (!((__VLS_ctx.isFooterVisible)))
+                                return;
+                            if (!(!((__VLS_ctx.customPresets && __VLS_ctx.customPresets.length))))
+                                return;
+                            if (!((__VLS_ctx.placeholders.quarter)))
+                                return;
+                            __VLS_ctx.selectPeriod('quarter');
+                        }
+                    };
+                    let __VLS_38;
+                    let __VLS_39;
+                    (__VLS_ctx.placeholders.quarter);
+                    __VLS_nonNullable(__VLS_40.slots).default;
+                    var __VLS_40;
+                }
+                if (__VLS_ctx.placeholders.year) {
+                    // @ts-ignore
+                    [McButton, McButton,];
+                    // @ts-ignore
+                    const __VLS_43 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }));
+                    const __VLS_44 = __VLS_43({ ...{ 'onClick': {} }, variation: ("black-link"), secondaryColor: ("purple"), }, ...__VLS_functionalComponentArgsRest(__VLS_43));
+                    let __VLS_48;
+                    const __VLS_49 = {
+                        onClick: (...[$event]) => {
+                            if (!((__VLS_ctx.isFooterVisible)))
+                                return;
+                            if (!(!((__VLS_ctx.customPresets && __VLS_ctx.customPresets.length))))
+                                return;
+                            if (!((__VLS_ctx.placeholders.year)))
+                                return;
+                            __VLS_ctx.selectPeriod('year');
+                        }
+                    };
+                    let __VLS_45;
+                    let __VLS_46;
+                    (__VLS_ctx.placeholders.year);
+                    __VLS_nonNullable(__VLS_47.slots).default;
+                    var __VLS_47;
+                }
+            }
+            if (__VLS_ctx.placeholders.confirm) {
+                // @ts-ignore
+                [McButton, McButton,];
+                // @ts-ignore
+                const __VLS_50 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("purple-outline"), size: ((__VLS_ctx.ButtonSize.Xs)), }));
+                const __VLS_51 = __VLS_50({ ...{ 'onClick': {} }, variation: ("purple-outline"), size: ((__VLS_ctx.ButtonSize.Xs)), }, ...__VLS_functionalComponentArgsRest(__VLS_50));
+                let __VLS_55;
+                const __VLS_56 = {
+                    onClick: (__VLS_ctx.handleSubmit)
+                };
+                let __VLS_52;
+                let __VLS_53;
+                (__VLS_ctx.placeholders.confirm);
+                __VLS_nonNullable(__VLS_54.slots).default;
+                var __VLS_54;
+            }
+        }
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "input-icon": __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+        // @ts-ignore
+        [McSvgIcon,];
+        // @ts-ignore
+        const __VLS_57 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("calendar"), size: ("300"), color: ((props.disabled ? 'outline-gray' : 'black')), }));
+        const __VLS_58 = __VLS_57({ name: ("calendar"), size: ("300"), color: ((props.disabled ? 'outline-gray' : 'black')), }, ...__VLS_functionalComponentArgsRest(__VLS_57));
+    }
+    if (__VLS_ctx.$slots.header) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { header: __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
+            var __VLS_62 = {};
+        }
+    }
+    if (__VLS_ctx.$slots.sidebar) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { sidebar: __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
+            var __VLS_63 = {};
+        }
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "icon-calendar": __VLS_thisSlot } = __VLS_nonNullable(__VLS_11.slots);
+        // @ts-ignore
+        [McSvgIcon,];
+        // @ts-ignore
+        const __VLS_64 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ ...{ class: ("mc-date-picker__icon") }, name: ("calendar"), }));
+        const __VLS_65 = __VLS_64({ ...{ class: ("mc-date-picker__icon") }, name: ("calendar"), }, ...__VLS_functionalComponentArgsRest(__VLS_64));
+    }
+    var __VLS_11;
+    if (!!__VLS_ctx.fieldErrors.errorText.value || !!props.helpText || !!__VLS_ctx.$slots.bottom) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-date-picker__footer") }, });
+        if (!!__VLS_ctx.fieldErrors.errorText.value) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_69 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), }));
+            const __VLS_70 = __VLS_69({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), }, ...__VLS_functionalComponentArgsRest(__VLS_69));
+            (__VLS_ctx.fieldErrors.errorText.value);
+            __VLS_nonNullable(__VLS_73.slots).default;
+            var __VLS_73;
+        }
+        if (!!__VLS_ctx.fieldErrors.errorText.value && (!!props.helpText || !!__VLS_ctx.$slots.bottom)) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+        }
+        var __VLS_74 = {};
+        if (!!props.helpText) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_75 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), }));
+            const __VLS_76 = __VLS_75({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), }, ...__VLS_functionalComponentArgsRest(__VLS_75));
+            (props.helpText);
+            __VLS_nonNullable(__VLS_79.slots).default;
+            var __VLS_79;
+        }
+    }
+    __VLS_styleScopedClasses['mc-date-picker'];
+    __VLS_styleScopedClasses['mc-date-picker__header'];
+    __VLS_styleScopedClasses['mc-date-picker__inner'];
+    __VLS_styleScopedClasses['mc-date-picker__input-wrapper'];
+    __VLS_styleScopedClasses['mc-date-picker__date-picker'];
+    __VLS_styleScopedClasses['mc-datepicker__footer-popup'];
+    __VLS_styleScopedClasses['mc-datepicker__footer-popup-periods'];
+    __VLS_styleScopedClasses['mc-date-picker__icon'];
+    __VLS_styleScopedClasses['mc-date-picker__footer'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "field": __VLS_nativeElements['div'],
+        "input": __VLS_12,
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            DatePicker: DatePicker,
+            McTitle: McTitle,
+            McSvgIcon: McSvgIcon,
+            McButton: McButton,
+            ButtonSize: ButtonSize,
+            TitleVariations: TitleVariations,
+            Weights: Weights,
+            attrs: attrs,
+            fieldErrors: fieldErrors,
+            input: input,
+            classes: classes,
+            dateFormat: dateFormat,
+            isTimePicker: isTimePicker,
+            isDateTimePicker: isDateTimePicker,
+            pickerType: pickerType,
+            isAutoApply: isAutoApply,
+            weekNumbers: weekNumbers,
+            modelType: modelType,
+            hoursOptions: hoursOptions,
+            minutesOptions: minutesOptions,
+            secondsOptions: secondsOptions,
+            isFooterVisible: isFooterVisible,
+            localValue: localValue,
+            handlerPreselectRange: handlerPreselectRange,
+            selectPeriod: selectPeriod,
+            handlePickDate: handlePickDate,
+            handleSubmit: handleSubmit,
+        };
+    },
+    emits: {},
+    props: {
+        //@ts-ignore
+        modelValue: {
+            type: [String, Array]
+        },
+        /**
+         *  Тип датапикера
+         */
+        type: {
+            type: String,
+            default: DatepickerTypes.DatePicker
+        },
+        /**
+         *  Заголовок поля:
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Редактируемый инпут
+         */
+        editable: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Локаль The locale code (ISO 639-1 + optional country code)
+         */
+        lang: {
+            type: String,
+            default: 'en'
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Отдаваемая дата будет в формате ISO String
+         */
+        toIsoFormat: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Формат отдаваемой даты
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({
+                week: 'Week',
+                month: 'Month',
+                quarter: 'Quarter',
+                year: 'Year',
+                confirm: 'Confirm'
+            })
+        },
+        /**
+         * Пресеты для быстрых периодов
+         **/
+        customPresets: {
+            type: Array,
+            default: () => []
+        },
+        range: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Если значение true, то датапикер отображается в открытом виде
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Дата, до которой все будет задизэйблено
+         **/
+        minDate: {
+            type: [Date, String]
+        },
+        /**
+         * Дата, после которой все будет задизэйблено
+         **/
+        maxDate: {
+            type: [String, Date]
+        },
+        /**
+         * Массив дат запрещенных к выбору / Метод которые проверяет каждую дату
+         **/
+        disabledDates: {
+            type: [Array, Function]
+        },
+        /**
+         * Массив дат разрешенных к выбору / Метод которые проверяет каждую дату
+         * **/
+        allowedDates: {
+            type: [Array, Function]
+        },
+        /**
+         * Функция проверяющая и устанавливающая доступно ли время для выбора
+         * Params [String] date - текущая дата
+         * return Boolean, где true - время заблокировано для выбора
+         * **/
+        disabledTime: {
+            type: [Array, Function]
+        },
+        minWidth: {
+            type: String,
+            default: '240px'
+        },
+        hours: {
+            type: Array,
+            default: () => []
+        },
+        minutes: {
+            type: Array,
+            default: () => []
+        },
+        seconds: {
+            type: Array,
+            default: () => []
+        },
+        timezone: {
+            type: String,
+            default: dayjs.tz.guess()
+        },
+        useTimezone: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Показывать ли крестик очищения поля
+         * */
+        clearable: {
+            type: Boolean,
+            default: true
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        setDefaultToday: {
+            type: Boolean,
+            default: true
+        },
+        markers: {
+            type: Array,
+            default: () => []
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        //@ts-ignore
+        modelValue: {
+            type: [String, Array]
+        },
+        /**
+         *  Тип датапикера
+         */
+        type: {
+            type: String,
+            default: DatepickerTypes.DatePicker
+        },
+        /**
+         *  Заголовок поля:
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Редактируемый инпут
+         */
+        editable: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Локаль The locale code (ISO 639-1 + optional country code)
+         */
+        lang: {
+            type: String,
+            default: 'en'
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Отдаваемая дата будет в формате ISO String
+         */
+        toIsoFormat: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Формат отдаваемой даты
+         */
+        placeholders: {
+            type: Object,
+            default: () => ({
+                week: 'Week',
+                month: 'Month',
+                quarter: 'Quarter',
+                year: 'Year',
+                confirm: 'Confirm'
+            })
+        },
+        /**
+         * Пресеты для быстрых периодов
+         **/
+        customPresets: {
+            type: Array,
+            default: () => []
+        },
+        range: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Если значение true, то датапикер отображается в открытом виде
+         */
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Дата, до которой все будет задизэйблено
+         **/
+        minDate: {
+            type: [Date, String]
+        },
+        /**
+         * Дата, после которой все будет задизэйблено
+         **/
+        maxDate: {
+            type: [String, Date]
+        },
+        /**
+         * Массив дат запрещенных к выбору / Метод которые проверяет каждую дату
+         **/
+        disabledDates: {
+            type: [Array, Function]
+        },
+        /**
+         * Массив дат разрешенных к выбору / Метод которые проверяет каждую дату
+         * **/
+        allowedDates: {
+            type: [Array, Function]
+        },
+        /**
+         * Функция проверяющая и устанавливающая доступно ли время для выбора
+         * Params [String] date - текущая дата
+         * return Boolean, где true - время заблокировано для выбора
+         * **/
+        disabledTime: {
+            type: [Array, Function]
+        },
+        minWidth: {
+            type: String,
+            default: '240px'
+        },
+        hours: {
+            type: Array,
+            default: () => []
+        },
+        minutes: {
+            type: Array,
+            default: () => []
+        },
+        seconds: {
+            type: Array,
+            default: () => []
+        },
+        timezone: {
+            type: String,
+            default: dayjs.tz.guess()
+        },
+        useTimezone: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Показывать ли крестик очищения поля
+         * */
+        clearable: {
+            type: Boolean,
+            default: true
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        setDefaultToday: {
+            type: Boolean,
+            default: true
+        },
+        markers: {
+            type: Array,
+            default: () => []
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */