@dataloop-ai/components 0.13.0

package/src/components/DlDatePicker/DlCalendar.vue

@@ -0,0 +1,332 @@
+<template>
+    <div
+        class="dl-calendar"
+        :class="{ 'dl-calendar-disabled': disabled }"
+    >
+        <div
+            class="dl-calendar--title"
+            :class="{ 'dl-calendar--title-disabled': disabled }"
+        >
+            <dl-icon
+                v-if="withLeftChevron"
+                icon="icon-dl-left-chevron"
+                class="dl-calendar--left-chevron"
+                size="16px"
+                :style="chevronStyle"
+                @click="$emit('prev')"
+            />
+            {{ title }}
+            <dl-icon
+                v-if="withRightChevron"
+                icon="icon-dl-right-chevron"
+                class="dl-calendar--right-chevron"
+                size="16px"
+                :style="chevronStyle"
+                @click="$emit('next')"
+            />
+        </div>
+        <div class="dl-calendar--header">
+            <div
+                v-for="day in weekNames"
+                :key="day"
+                class="dl-calendar--header_item"
+                :class="{ 'dl-calendar--header_item-disabled': disabled }"
+            >
+                {{ day }}
+            </div>
+        </div>
+        <div class="dl-calendar--content">
+            <div
+                v-for="date in dates"
+                :key="date.toString()"
+                class="dl-calendar--day"
+                :class="{ 'dl-calendar--day-disabled': disabled }"
+                :style="getDayStyle(date)"
+                @click="handleClick(date)"
+                @mousedown="handleMouseDown(date)"
+                @mouseenter="handleMouseEnter(date)"
+            >
+                <div
+                    class="dl-calendar--inner_day"
+                    :style="getInnerDayStyle(date)"
+                >
+                    {{ date.date() }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import DlIcon from '../DlIcon.vue'
+import { CalendarDate } from './classes/CalendarDate'
+import { defineComponent, PropType } from 'vue-demi'
+import { getWeekDayNames } from './utils'
+import { DateInterval } from './types'
+import { CustomDate } from './classes/CustomDate'
+import { isInRange } from './isInRange'
+
+const DAYS_IN_WEEK = 7
+
+export default defineComponent({
+    components: {
+        DlIcon
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        dates: {
+            type: Array as PropType<Partial<CalendarDate>[]>,
+            required: true
+        },
+        availableRange: {
+            type: Object as PropType<Partial<DateInterval>>,
+            default: null
+        },
+        modelValue: {
+            type: Object as PropType<DateInterval>,
+            default: () => {
+                const date = new Date()
+                return {
+                    from: date,
+                    to: date
+                }
+            }
+        },
+        withLeftChevron: Boolean,
+        withRightChevron: Boolean,
+        disabled: Boolean
+    },
+    emits: [
+        'update:modelValue',
+        'change',
+        'mousedown',
+        'mouseenter',
+        'next',
+        'prev'
+    ],
+    computed: {
+        weekNames(): string[] {
+            return getWeekDayNames()
+        },
+        chevronStyle(): Record<string, any> {
+            return this.disabled
+                ? {
+                      color: 'var(--dl-color-disabled)',
+                      cursor: 'not-allowed'
+                  }
+                : {
+                      color: 'var(--dl-color-darker)',
+                      cursor: 'pointer'
+                  }
+        }
+    },
+    methods: {
+        handleClick(value: CustomDate) {
+            if (!isInRange(this.availableRange, value)) return
+            const newDate = {
+                from: value.toDate(),
+                to: value.toDate()
+            }
+
+            this.$emit('update:modelValue', newDate)
+            this.$emit('change', newDate)
+        },
+        getDayStyle(value: Partial<CalendarDate>) {
+            const style: Record<string, any> = {}
+
+            const from = new CalendarDate(this.modelValue.from)
+            const to = new CalendarDate(this.modelValue.to)
+
+            if (!from.isSameOrAfter(to, 'date')) {
+                const bgColor = 'rgba(52, 82, 255, 0.1)'
+
+                if (value.isAfter(from, 'date') && value.isBefore(to, 'date')) {
+                    style.background = bgColor
+                } else if (value.isSame(from, 'date')) {
+                    style.background = `linear-gradient(to right, transparent 50%, ${bgColor} 50%)`
+                } else if (value.isSame(to, 'date')) {
+                    style.background = `linear-gradient(to right, ${bgColor} 50%, transparent 50%)`
+                }
+
+                const radius = '11px'
+
+                if (value.day() === 0) {
+                    style.borderTopLeftRadius = radius
+                    style.borderBottomLeftRadius = radius
+                } else if (value.day() === DAYS_IN_WEEK - 1) {
+                    style.borderTopRightRadius = radius
+                    style.borderBottomRightRadius = radius
+                }
+            }
+
+            return style
+        },
+
+        getInnerDayStyle(value: Partial<CalendarDate>) {
+            let style: Record<string, any> = {}
+
+            const isToday = value.isSame(new CalendarDate(), 'date')
+
+            if (
+                !isInRange(
+                    this.availableRange,
+                    new CustomDate(value.toString())
+                )
+            ) {
+                if (isToday) {
+                    style.color = 'var(--dl-color-secondary)'
+                } else {
+                    style.color = 'var(--dl-color-lighter)'
+                }
+            } else {
+                const selectedStyle = {
+                    backgroundColor: 'var(--dl-color-secondary)',
+                    color: 'var(--dl-color-text-buttons)',
+                    borderRadius: '11px'
+                }
+
+                const disabledOpacity = 0.6
+
+                const from = new CalendarDate(this.modelValue.from)
+                const to = new CalendarDate(this.modelValue.to)
+
+                const isIntervalBoundary =
+                    value.isSame(from, 'date') || value.isSame(to, 'date')
+
+                if (isIntervalBoundary && this.disabled) {
+                    style = {
+                        ...style,
+                        ...selectedStyle,
+                        opacity: disabledOpacity,
+                        color: 'var(--dl-color-disabled)'
+                    }
+                } else if (isIntervalBoundary) {
+                    style = {
+                        ...style,
+                        ...selectedStyle
+                    }
+                } else if (isToday && !isIntervalBoundary && this.disabled) {
+                    style.color = 'var(--dl-color-secondary)'
+                    style.opacity = disabledOpacity
+                } else if (isToday && !isIntervalBoundary) {
+                    style.color = 'var(--dl-color-secondary)'
+                } else if (this.disabled) {
+                    style.color = 'var(--dl-color-disabled)'
+                } else if (value.isDisabled) {
+                    style.color = 'var(--dl-color-lighter)'
+                }
+            }
+
+            return style
+        },
+
+        handleMouseDown(value: CustomDate) {
+            if (!isInRange(this.availableRange, value)) return
+            this.$emit('mousedown', value.toDate())
+        },
+
+        handleMouseEnter(value: CustomDate) {
+            if (!isInRange(this.availableRange, value)) return
+
+            if (value.isBefore(new CustomDate(this.modelValue.from))) return
+
+            this.$emit('mouseenter', value.toDate())
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-calendar {
+    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &--title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+        font-size: 14px;
+        padding: 0 15px 20px 15px;
+        position: relative;
+        color: var(--dl-color-darker);
+
+        &-disabled {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &--left-chevron,
+    &--right-chevron {
+        width: 16px;
+        height: 16px;
+        position: absolute;
+    }
+
+    &--left-chevron {
+        left: 0;
+    }
+
+    &--right-chevron {
+        right: 0;
+    }
+
+    &--header {
+        font-weight: bold;
+        display: flex;
+        padding-bottom: 10px;
+    }
+
+    &--content {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        row-gap: 10px;
+    }
+
+    &--header_item {
+        min-height: 18px;
+        color: var(--dl-color-medium);
+        justify-content: center;
+        align-items: center;
+
+        &-disabled {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &--day {
+        min-height: 20px;
+        color: var(--dl-color-darker);
+
+        &-disabled {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &--inner_day {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 auto;
+    }
+
+    &--header_item,
+    &--day {
+        display: flex;
+        flex: 1 1 auto;
+    }
+}
+
+.dl-calendar-disabled {
+    cursor: not-allowed !important;
+}
+</style>

package/src/components/DlDatePicker/DlDatePicker.vue

@@ -0,0 +1,315 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-date-picker"
+    >
+        <div
+            v-if="type === 'day'"
+            class="dl-date-picker--day_picker"
+        >
+            <div class="dl-date-picker--calendar_from">
+                <dl-calendar
+                    v-if="calendarFrom"
+                    :model-value="dateInterval"
+                    :title="calendarFrom.dateTitle"
+                    :dates="calendarFrom.dates"
+                    :available-range="availableRange"
+                    :disabled="disabled"
+                    :with-left-chevron="true"
+                    @prev="handleDatePrev"
+                    @update:modelValue="updateDateInterval"
+                    @mousedown="handleMousedown"
+                    @mouseenter="handleMouseenter"
+                />
+            </div>
+            <div class="dl-date-picker--calendar_to">
+                <dl-calendar
+                    v-if="calendarTo"
+                    :model-value="dateInterval"
+                    :title="calendarTo.dateTitle"
+                    :dates="calendarTo.dates"
+                    :available-range="availableRange"
+                    :disabled="disabled"
+                    :with-right-chevron="true"
+                    @next="handleDateNext"
+                    @update:modelValue="updateDateInterval"
+                    @mousedown="handleMousedown"
+                    @mouseenter="handleMouseenter"
+                />
+            </div>
+        </div>
+        <div
+            v-else
+            class="dl-date-picker--month_picker"
+        >
+            <div class="dl-date-picker--calendar_from">
+                <dl-month-calendar
+                    :model-value="dateInterval"
+                    :title="calendarFrom.monthTitle"
+                    :available-range="availableRange"
+                    :disabled="disabled"
+                    :with-left-chevron="true"
+                    @update:modelValue="updateDateInterval"
+                    @prev="handleMonthPrev"
+                    @mousedown="handleMousedown"
+                    @mouseenter="handleMouseenter"
+                />
+            </div>
+            <div class="dl-date-picker--calendar_to">
+                <dl-month-calendar
+                    :model-value="dateInterval"
+                    :title="calendarTo.monthTitle"
+                    :available-range="availableRange"
+                    :disabled="disabled"
+                    :with-right-chevron="true"
+                    @update:modelValue="updateDateInterval"
+                    @next="handleMonthNext"
+                    @mousedown="handleMousedown"
+                    @mouseenter="handleMouseenter"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import DlCalendar from './DlCalendar.vue'
+import DlMonthCalendar from './DlMonthCalendar.vue'
+import { Calendar } from './classes/Calendar'
+import { CalendarDate } from './classes/CalendarDate'
+import { defineComponent, PropType } from 'vue-demi'
+import { DateInterval } from './types'
+import { v4 } from 'uuid'
+
+const HOVER_TIMEOUT = 700
+
+export default defineComponent({
+    components: {
+        DlCalendar,
+        DlMonthCalendar
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        modelValue: {
+            type: Object as PropType<DateInterval>,
+            default: () => {
+                const date = new Date()
+                return {
+                    from: date,
+                    to: date
+                }
+            }
+        },
+        type: {
+            type: String,
+            default: 'day'
+        },
+        availableRange: {
+            type: Object as PropType<Partial<DateInterval> | null>,
+            default: null
+        },
+        normalizeCalendars: Boolean,
+        disabled: Boolean
+    },
+    emits: ['update:modelValue', 'change'],
+    data(): {
+        uuid: string
+        timeout: number | null
+        calendarFrom: Calendar | null
+        calendarTo: Calendar | null
+        isSelectionMode: boolean
+        dateInterval: DateInterval
+    } {
+        return {
+            uuid: `dl-date-picker-${v4()}`,
+            timeout: null,
+            calendarFrom: null,
+            calendarTo: null,
+            isSelectionMode: false,
+            dateInterval: this.modelValue
+        }
+    },
+    watch: {
+        type(value: string) {
+            const cDateFrom = new CalendarDate(this.modelValue.from)
+            const cDateTo = new CalendarDate(this.modelValue.to)
+
+            this.calendarFrom!.currentDate = cDateFrom
+            this.calendarTo!.currentDate = cDateTo
+
+            const unit = value === 'day' ? 'month' : 'year'
+
+            this.calendarTo!.activeDate = cDateTo
+            this.calendarFrom!.activeDate = new CalendarDate(cDateTo).subtract(
+                1,
+                unit
+            )
+        },
+        modelValue: {
+            handler(value: DateInterval) {
+                this.dateInterval = value
+                const cDateFrom = new CalendarDate(value.from)
+                const cDateTo = new CalendarDate(value.to)
+
+                this.calendarFrom!.currentDate = cDateFrom
+                this.calendarTo!.currentDate = cDateTo
+
+                if (this.normalizeCalendars) {
+                    const unit = this.type === 'day' ? 'month' : 'year'
+
+                    this.calendarTo!.activeDate = cDateTo
+                    this.calendarFrom!.activeDate = new CalendarDate(
+                        cDateTo
+                    ).subtract(1, unit)
+                }
+            },
+            deep: true
+        }
+    },
+    beforeMount() {
+        const cDateFrom = new CalendarDate(this.modelValue.from)
+        const cDateTo = new CalendarDate(this.modelValue.to)
+
+        const unit = this.type === 'day' ? 'month' : 'year'
+
+        this.calendarFrom = new Calendar(cDateFrom)
+        this.calendarFrom.activeDate = new CalendarDate(cDateTo).subtract(
+            1,
+            unit
+        )
+
+        this.calendarTo = new Calendar(cDateTo)
+        this.calendarTo.activeDate = cDateTo
+    },
+    beforeUnmount() {
+        if (this.timeout) {
+            clearTimeout(this.timeout)
+        }
+    },
+    methods: {
+        updateModelValue(value: DateInterval) {
+            if (this.disabled) return
+            this.$emit('update:modelValue', value)
+            this.$emit('change', value)
+        },
+
+        updateDateInterval(value: DateInterval) {
+            if (this.disabled) return
+            this.dateInterval = value
+        },
+
+        handleDateNext() {
+            if (this.disabled) return
+
+            this.calendarFrom?.moveToNextMonth()
+            this.calendarTo?.moveToNextMonth()
+        },
+
+        handleDatePrev() {
+            if (this.disabled) return
+
+            this.calendarFrom?.moveToPreviousMonth()
+            this.calendarTo?.moveToPreviousMonth()
+        },
+
+        handleMonthNext() {
+            if (this.disabled) return
+
+            this.calendarFrom?.moveToNextYear()
+            this.calendarTo?.moveToNextYear()
+        },
+
+        handleMonthPrev() {
+            if (this.disabled) return
+
+            this.calendarFrom?.moveToPreviousYear()
+            this.calendarTo?.moveToPreviousYear()
+        },
+
+        handleMouseup() {
+            if (this.timeout) {
+                clearTimeout(this.timeout)
+            }
+
+            if (this.isSelectionMode) {
+                window.removeEventListener('mouseup', this.handleMouseup)
+                this.isSelectionMode = false
+                this.updateModelValue(this.dateInterval)
+            }
+        },
+
+        handleMousedown(date: Date) {
+            if (this.disabled) return
+
+            window.addEventListener('mouseup', this.handleMouseup)
+
+            this.dateInterval = { from: date, to: date }
+
+            this.isSelectionMode = true
+        },
+
+        handleMouseenter(date: Date) {
+            if (!this.isSelectionMode) return
+
+            if (this.type === 'day') {
+                if (
+                    this.calendarTo?.dates[
+                        this.calendarTo?.dates.length - 1
+                    ].isSame(new CalendarDate(date))
+                ) {
+                    if (this.timeout) {
+                        clearTimeout(this.timeout)
+                    }
+
+                    // @ts-ignore
+                    this.timeout = setTimeout(
+                        this.handleDateNext,
+                        HOVER_TIMEOUT
+                    )
+                }
+            } else {
+                if (
+                    this.calendarTo?.activeDate.isSame(
+                        new CalendarDate(date),
+                        'year'
+                    ) &&
+                    new CalendarDate(date).month() === 11
+                ) {
+                    if (this.timeout) {
+                        clearTimeout(this.timeout)
+                    }
+
+                    // @ts-ignore
+                    this.timeout = setTimeout(
+                        this.handleMonthNext,
+                        HOVER_TIMEOUT
+                    )
+                }
+            }
+
+            this.dateInterval = { from: this.dateInterval.from, to: date }
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-date-picker {
+    user-select: none;
+    padding: 0 30px;
+
+    &--day_picker,
+    &--month_picker {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    &--calendar_from,
+    &--calendar_to {
+        width: 230px;
+        padding: 30px 0;
+    }
+}
+</style>