@dataloop-ai/components 0.13.0

package/src/components/DlDatePicker/DlMonthCalendar.vue

@@ -0,0 +1,282 @@
+<template>
+    <div
+        class="dl-month-calendar"
+        :class="{ 'dl-month-calendar-disabled': disabled }"
+    >
+        <div
+            class="dl-month-calendar--title"
+            :class="{ 'dl-month-calendar--title-disabled': disabled }"
+        >
+            <dl-icon
+                v-if="withLeftChevron"
+                icon="icon-dl-left-chevron"
+                class="dl-month-calendar--left-chevron"
+                size="16px"
+                :style="chevronStyle"
+                @click="$emit('prev')"
+            />
+            {{ title }}
+            <dl-icon
+                v-if="withRightChevron"
+                icon="icon-dl-right-chevron"
+                class="dl-month-calendar--right-chevron"
+                size="16px"
+                :style="chevronStyle"
+                @click="$emit('next')"
+            />
+        </div>
+        <div class="dl-month-calendar--content">
+            <div
+                v-for="month in months"
+                :key="month.name"
+                class="dl-month-calendar--month"
+                :class="{ 'dl-month-calendar--month-disabled': disabled }"
+                :style="getMonthStyle(month.value)"
+                @click="handleClick(month.value)"
+                @mouseenter="handleMouseenter(month.value)"
+                @mousedown="handleMousedown(month.value)"
+            >
+                {{ month.name }}
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import DlIcon from '../DlIcon.vue'
+import { CalendarDate } from './classes/CalendarDate'
+import { DateInterval } from './types'
+import { Month, getMonths } from './utils'
+import { isInRange } from './isInRange'
+
+export default defineComponent({
+    components: {
+        DlIcon
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        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: {
+        months(): Month[] {
+            return getMonths()
+        },
+        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: number) {
+            const d = new CalendarDate(this.modelValue.from)
+            d.year(parseInt(this.title)).month(value).startOf('month')
+
+            if (!isInRange(this.availableRange, d)) return
+
+            const newDate = {
+                from: d.toDate(),
+                to: d.toDate()
+            }
+            this.$emit('update:modelValue', newDate)
+            this.$emit('change', newDate)
+        },
+
+        handleMouseenter(value: number) {
+            const d = new CalendarDate(this.modelValue.from)
+            d.year(parseInt(this.title)).month(value).startOf('month')
+
+            if (!isInRange(this.availableRange, d)) return
+
+            if (d.isBefore(new CalendarDate(this.modelValue.from), 'day'))
+                return
+
+            this.$emit('mouseenter', d.toDate())
+        },
+
+        handleMousedown(value: number) {
+            const d = new CalendarDate(this.modelValue.from)
+            d.year(parseInt(this.title)).month(value).startOf('month')
+
+            if (!isInRange(this.availableRange, d)) return
+
+            this.$emit('mousedown', d.toDate())
+        },
+
+        getMonthStyle(value: number) {
+            let style: Record<string, any> = {}
+
+            const selectedStyle = {
+                color: 'var(--dl-color-text-buttons)',
+                background: 'var(--dl-color-secondary)'
+            }
+
+            const currentD = new CalendarDate(this.modelValue.from)
+            const d = new CalendarDate(currentD)
+            d.month(value).year(parseInt(this.title))
+
+            if (!isInRange(this.availableRange, d)) {
+                style = {
+                    'border-color': 'var(--dl-color-disabled)',
+                    color: 'var(--dl-color-disabled)'
+                }
+            } else {
+                const initialD = new CalendarDate()
+
+                const from = new CalendarDate(this.modelValue.from)
+                const to = new CalendarDate(this.modelValue.to)
+
+                const bgColor = 'var(--dl-color-secondary)'
+                const intervalOpacity = 0.3
+
+                const isInInterval =
+                    d.isAfter(from, 'month') && d.isBefore(to, 'month')
+
+                const isIntervalBoundary =
+                    d.isSame(from, 'month') || d.isSame(to, 'month')
+
+                if (isInInterval && this.disabled) {
+                    style = {
+                        ...selectedStyle,
+                        background: bgColor,
+                        opacity: intervalOpacity
+                    }
+                } else if (isInInterval) {
+                    style = {
+                        background: bgColor,
+                        color: 'var(--dl-color-text-buttons)',
+                        opacity: intervalOpacity
+                    }
+                } else if (isIntervalBoundary && this.disabled) {
+                    style = {
+                        ...style,
+                        ...selectedStyle,
+                        opacity: 0.6
+                    }
+                } else if (isIntervalBoundary) {
+                    style = {
+                        ...style,
+                        ...selectedStyle
+                    }
+                } else if (
+                    d.isSame(initialD, 'month') &&
+                    !isIntervalBoundary &&
+                    this.disabled
+                ) {
+                    style.color = 'var(--dl-color-secondary)'
+                } else if (d.isSame(initialD, 'month') && !isIntervalBoundary) {
+                    style.color = 'var(--dl-color-secondary)'
+                }
+            }
+
+            return style
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-month-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;
+    }
+
+    &--content {
+        width: 250px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+        margin-left: -15px;
+    }
+
+    &--month {
+        color: var(--dl-color-darker);
+        border: 1px solid var(--dl-color-separator);
+        border-radius: 2px;
+        margin-left: 15px;
+        margin-bottom: 15px;
+        cursor: pointer;
+        font-size: 14px;
+        text-transform: capitalize;
+        padding: 7px 21px;
+
+        &-disabled {
+            cursor: not-allowed;
+            color: var(--dl-color-disabled);
+            border: 1px solid var(--dl-color-disabled);
+        }
+    }
+}
+
+.dl-month-calendar-disabled {
+    cursor: not-allowed !important;
+}
+</style>

package/src/components/DlDatePicker/classes/Calendar.ts

@@ -0,0 +1,110 @@
+import { CalendarDate } from './CalendarDate'
+
+export class Calendar {
+    private _dateTitle: string
+    private _monthTitle: string
+    private _currentDate: CalendarDate
+    private _activeDate: CalendarDate
+    private _dates: CalendarDate[] = []
+
+    constructor(date?: CalendarDate) {
+        this._currentDate = date || new CalendarDate()
+        this._activeDate = new CalendarDate(this._currentDate)
+
+        this._dateTitle = ''
+        this._monthTitle = ''
+        this._updateState()
+    }
+
+    private _updateState() {
+        this._dateTitle = this._activeDate.format('MMMM YYYY')
+        this._monthTitle = this._activeDate.format('YYYY')
+
+        const startOfMonth = this._activeDate.clone().startOf('month')
+        const endOfMonth = this._activeDate.clone().endOf('month')
+
+        let startDate = new CalendarDate(startOfMonth.day(0))
+
+        const endDate = new CalendarDate(endOfMonth.day(6))
+
+        this._dates = []
+
+        while (startDate.isSameOrBefore(endDate)) {
+            if (
+                startDate.isSame(this._currentDate, 'day') &&
+                startDate.isSame(this._currentDate, 'month')
+            ) {
+                startDate.isCurrent = true
+            } else {
+                startDate.isCurrent = false
+            }
+
+            if (!startDate.isSame(this._activeDate, 'month')) {
+                startDate.isDisabled = true
+            }
+
+            this._dates.push(startDate)
+            startDate = new CalendarDate(startDate.clone().add(1, 'd'))
+        }
+    }
+
+    public get dates(): CalendarDate[] {
+        return this._dates
+    }
+
+    public get dateTitle(): string {
+        return this._dateTitle
+    }
+
+    public set dateTitle(value: string) {
+        this._dateTitle = value
+    }
+
+    public get monthTitle(): string {
+        return this._monthTitle
+    }
+
+    public set monthTitle(value: string) {
+        this._monthTitle = value
+    }
+
+    public get currentDate(): CalendarDate {
+        return this._currentDate
+    }
+
+    public set currentDate(value: CalendarDate) {
+        this._currentDate = value
+        this._dates.forEach((date) => {
+            date.isCurrent = date.isSame(value)
+        })
+    }
+
+    public get activeDate(): CalendarDate {
+        return this._activeDate
+    }
+
+    public set activeDate(value: CalendarDate) {
+        this._activeDate = value
+        this._updateState()
+    }
+
+    public moveToNextMonth() {
+        this._activeDate.add(1, 'M').startOf('month')
+        this._updateState()
+    }
+
+    public moveToPreviousMonth() {
+        this._activeDate.subtract(1, 'M').startOf('month')
+        this._updateState()
+    }
+
+    public moveToNextYear() {
+        this._activeDate.add(1, 'y').startOf('year')
+        this._updateState()
+    }
+
+    public moveToPreviousYear() {
+        this._activeDate.subtract(1, 'y').startOf('year')
+        this._updateState()
+    }
+}

package/src/components/DlDatePicker/classes/CalendarDate.ts

@@ -0,0 +1,12 @@
+import { CustomDate } from './CustomDate'
+
+export class CalendarDate extends CustomDate {
+    public isCurrent: boolean
+    public isDisabled: boolean
+
+    constructor(date?: CalendarDate | CustomDate | Date | string) {
+        super(date)
+        this.isCurrent = false
+        this.isDisabled = false
+    }
+}

package/src/components/DlDatePicker/classes/CustomDate.ts

@@ -0,0 +1,218 @@
+import moment, { DurationInputArg1, Moment } from 'moment'
+
+export class CustomDate {
+    private _momentDate: Moment = moment()
+
+    constructor(date?: CustomDate | Moment | Date | string) {
+        if (date instanceof CustomDate) {
+            this._momentDate = date._momentDate.clone()
+        } else if (moment.isMoment(date)) {
+            this._momentDate = date.clone()
+        } else if (typeof date === 'string' || date instanceof Date) {
+            this._momentDate = moment(date)
+        }
+    }
+
+    public day(d: number | string): CustomDate
+    public day(): number
+    public day(d?: any): any {
+        if (typeof d === 'string' || typeof d === 'number') {
+            this._momentDate.day(d)
+
+            return this
+        }
+
+        return this._momentDate.day()
+    }
+
+    public date(d: number): CustomDate
+    public date(): number
+    public date(d?: any): any {
+        if (typeof d === 'number') {
+            this._momentDate.date(d)
+
+            return this
+        }
+
+        return this._momentDate.date()
+    }
+
+    public month(M: string | number): CustomDate
+    public month(): number
+    public month(M?: any): any {
+        if (typeof M === 'string' || typeof M === 'number') {
+            this._momentDate.month(M)
+
+            return this
+        }
+
+        return this._momentDate.month()
+    }
+
+    public year(y: number): CustomDate
+    public year(): number
+    public year(y?: any): any {
+        if (typeof y === 'number') {
+            this._momentDate.year(y)
+
+            return this
+        }
+
+        return this._momentDate.year()
+    }
+
+    public hours(h?: number): CustomDate
+    public hours(): number
+    public hours(h?: any): any {
+        if (typeof h === 'number') {
+            this._momentDate.hours(h)
+
+            return this
+        }
+
+        return this._momentDate.hours()
+    }
+
+    public minutes(m?: number): CustomDate
+    public minutes(): number
+    public minutes(m?: any): any {
+        if (typeof m === 'number') {
+            this._momentDate.minutes(m)
+
+            return this
+        }
+
+        return this._momentDate.minutes()
+    }
+
+    public format(format?: string) {
+        return this._momentDate.format(format)
+    }
+
+    public toString() {
+        return this._momentDate.toISOString()
+    }
+
+    public startOf(unitOfTime: string) {
+        this._momentDate.startOf(unitOfTime as moment.unitOfTime.StartOf)
+
+        return this
+    }
+
+    public endOf(unitOfTime: string) {
+        this._momentDate.endOf(unitOfTime as moment.unitOfTime.StartOf)
+
+        return this
+    }
+
+    public add(amount: number, unitOfTime: string) {
+        this._momentDate.add(
+            amount as DurationInputArg1,
+            unitOfTime as moment.unitOfTime.DurationConstructor
+        )
+
+        return this
+    }
+
+    public subtract(amount: number, unitOfTime: string) {
+        this._momentDate.subtract(
+            amount as DurationInputArg1,
+            unitOfTime as moment.unitOfTime.DurationConstructor
+        )
+
+        return this
+    }
+
+    public clone() {
+        return new CustomDate(this)
+    }
+
+    public isSame(date: CustomDate, granularity?: string) {
+        return this._momentDate.isSame(
+            date._momentDate,
+            granularity as moment.unitOfTime.StartOf
+        )
+    }
+
+    public isAfter(date: CustomDate, granularity?: string) {
+        return this._momentDate.isAfter(
+            date._momentDate,
+            granularity as moment.unitOfTime.StartOf
+        )
+    }
+
+    public isBefore(date: CustomDate, granularity?: string) {
+        return this._momentDate.isBefore(
+            date._momentDate,
+            granularity as moment.unitOfTime.StartOf
+        )
+    }
+
+    public isSameOrBefore(date: CustomDate, granularity?: string) {
+        return this._momentDate.isSameOrBefore(
+            date._momentDate,
+            granularity as moment.unitOfTime.StartOf
+        )
+    }
+
+    public isSameOrAfter(date: CustomDate, granularity?: string) {
+        return this._momentDate.isSameOrAfter(
+            date._momentDate,
+            granularity as moment.unitOfTime.StartOf
+        )
+    }
+
+    public toDate() {
+        return this._momentDate.toDate()
+    }
+
+    public static toString(date?: string) {
+        return moment(date).toISOString()
+    }
+
+    public static format(date?: Date | string, format?: string): string {
+        return moment(date).format(format)
+    }
+
+    public static startOf(unitOfTime: string, date?: string): CustomDate {
+        return new CustomDate(
+            moment(date).startOf(unitOfTime as moment.unitOfTime.StartOf)
+        )
+    }
+
+    public static endOf(unitOfTime: string, date?: string): CustomDate {
+        return new CustomDate(
+            moment(date).endOf(unitOfTime as moment.unitOfTime.StartOf)
+        )
+    }
+
+    public static add(
+        amount: number,
+        unitOfTime: string,
+        date?: string
+    ): CustomDate {
+        return new CustomDate(
+            moment(date).add(
+                amount as DurationInputArg1,
+                unitOfTime as moment.unitOfTime.DurationConstructor
+            )
+        )
+    }
+
+    public static subtract(
+        amount: number,
+        unitOfTime: string,
+        date?: string
+    ): CustomDate {
+        return new CustomDate(
+            moment(date).subtract(
+                amount as DurationInputArg1,
+                unitOfTime as moment.unitOfTime.DurationConstructor
+            )
+        )
+    }
+
+    public static toDate(date: CustomDate) {
+        return date._momentDate.toDate()
+    }
+}

package/src/components/DlDatePicker/index.ts

@@ -0,0 +1,3 @@
+import DlDatePicker from './DlDatePicker.vue'
+
+export { DlDatePicker }

package/src/components/DlDatePicker/isInRange.ts

@@ -0,0 +1,44 @@
+import { CustomDate } from './classes/CustomDate'
+import { DateInterval } from './types'
+
+export function isInRange(
+    range: Partial<DateInterval> | null,
+    value: CustomDate | DateInterval | null
+): boolean {
+    const unit = 'day'
+    if (!value || !range || Object.values(range).every((key) => !key))
+        return true
+
+    const valueFrom =
+        'from' in value
+            ? new CustomDate(value.from).startOf(unit)
+            : value.startOf(unit)
+    const valueTo =
+        'to' in value
+            ? new CustomDate(value.to).startOf(unit)
+            : value.startOf(unit)
+
+    const rangeFrom = range.from && new CustomDate(range.from)
+    const rangeTo = range.to && new CustomDate(range.to)
+
+    if (rangeFrom && rangeTo) {
+        return (
+            valueFrom.isSameOrAfter(rangeFrom, unit) &&
+            valueTo.isSameOrBefore(rangeTo, unit)
+        )
+    }
+
+    if (!rangeFrom) {
+        return (
+            valueFrom.isSameOrBefore(rangeTo, unit) &&
+            valueTo.isSameOrBefore(rangeTo, unit)
+        )
+    }
+
+    if (!rangeTo) {
+        return (
+            valueFrom.isSameOrAfter(rangeFrom, unit) &&
+            valueTo.isSameOrAfter(rangeFrom, unit)
+        )
+    }
+}

package/src/components/DlDatePicker/types.ts

@@ -0,0 +1,4 @@
+export interface DateInterval {
+    from: Date
+    to: Date
+}